1.引入其他css样式表
@import "style.css"引号里填url

其实有很多种

1.CSS的工作原理

瀏覽器解析網頁的流程圖

css工作的原理

2. css的幾種引用方式

2.1. 外部樣式表

2.1.1. 通過link引入(推薦)

link寫在head裏面

2.1.2. 通過@import引入

注意格式,不要忘記分號

2.2. 内部樣式表

在頁面中使用<style>標簽.

跟html寫在一起

2.3. 内聯樣式

直接在標簽内寫屬性

内聯樣式

2.4. 屬性樣式(廢棄)

看看就好

3.css選擇器

3.1. 種類

3.1.1. *直接選擇所有元素

3.1.2. #id選擇

3.1.3. .class選擇

3.1.4. element選擇

比如p{ }

3.2. 組合選擇

組合選擇

上圖中,E F形式可以選擇E裏面的F,不管F嵌套了幾層,而E>F,只能當F是E的直接子元素時才能生效,如果E裏套了D再套F就不會生效.
E+F是選擇跟E直接相鄰的F(要求同級);
E~F是選擇E後面所有的F(要求同級);
.class1.class2指同時擁有這兩個class的元素

3.3. 屬性選擇器

image.png
舉例:
<input type="text">可使用input[type=text]{ }來選擇

3.4. 僞類選擇器

伪类选择器 示例
上图中有以下两句，分别表示在<div class="wrap">里的最前面和最后面插入文字内容‘aa’和‘bbb’，最终效果见下图。

.wrap::before{
content:'aa';
}
.wrap::after{
content:'bbb'
}

最后的效果 示例选择器及含义

3.5. css的样式渲染优先级规则

···根据css样式渲染的顺序是从上到下的原则,链接的三种形态visited(已被点击)-hover(悬停)-active(按下)应按此顺序,否则visited在最后的话,会导致一次visited之后hover和active的效果不再生效的问题.

first-oftype

first-of-type首先先选中有此.child 类的所有元素,然后再选中这些元素的同类标签,在这些同类标签中选第一个,因此第二个h2就没有被给样式.

相对应的改了这里的属性,h2就变了

···在属性后面加上!important可以让这个属性有最高的优先级。

!important