1.基本选择器

基本选择器包括:

  • 通配选择器
  • 元素选择器
  • 类选择器
  • id 选择器

1.1 通配选择器

  • 作用:可以选中所有的 HTML 元素
  • 语法:
1
2
3
4
5
6
7
* {
属性名:属性值;
}
* {
color: greenyellow;
font-size: 50px;
}

备注:目前看来通配选择器貌似有点鸡肋,但是后面清除样式时,会有很大帮助。

1.2 元素选择器

  • 作用:为页面中的某种元素统一设置样式
  • 语法:
1
2
3
4
5
6
7
8
9
10
11
12
标签名 {
属性名:属性值;
}
h1 {
color: black;
font-size: 55px;
}

h2 {
color: hotpink;
font-size: 50px;
}

备注:元素选择器无法实现差异化设置样式。

1.3 类选择器

  • 作用:根据元素的class值,来选中某些元素
  • 语法:
1
2
3
4
5
6
7
8
9
10
11
12
.类名 {
属性名: 属性值;
}
.tangPoetry{
color: rgb(38, 103, 113);
font-size: 40px;
}

.songCi{
color: #1448a7;
font-size: 40px;
}
  • 注意: 1.元素的class属性值不带.,但是 CSS 的类选择器需要带.。 2.class的值,是自定义的,按照标准:不要使用纯数字,不要使用中文,尽量使用英文与数字的组合,若由多个单词组成,使用-做连接,且命名要有意义,做到”见名知意”。 3.一个元素不能写多个class属性,后面写的会失效 4.一个元素的class属性,能写多个值,要用空格隔开。如下所示
1
2
3
4
<!-- 错误写法 -->
<h1 class="test001" class="test002">hello world!</h1>
<!-- 正确写法 -->
<h1 class="test001 test002">hello world!</h1>

1.4 ID 选择器

  • 作用:根据元素的id值,来选中某些元素
  • 语法:
1
2
3
4
5
6
7
8
9
10
11
12
#ID {
属性名: 属性值;
}
#tangPoetry{
color: rgb(38, 103, 113);
font-size: 50px;
}

#songCi{
color: #1448a7;
font-size: 50px;
}

1.5 基本选择器总结

基本选择器特点用法
通配选择器选中所有标签,一般用于清除样式* {color:red}
元素选择器选中所有同种标签,但是不能差异化选中h1 {color:red}
类选择器选中所有特定类名(class值)的元素—-使用频率很高.say{color:red}
ID 选择器选中特定的id值的那个元素(唯一的)#say{color:red}

2.复合选择器

2.1 交集选择器

  • 作用:选中同时符合多个条件的元素
  • 语法:选择器1选择器2选择器3....选择器n{}
  • 举例
1
2
3
4
5
6
p.rich {
color: yellowgreen;
}
p.beauty {
color: purple;
}
  • 注意
  1. 有标签名、标签名必须写在前面。
  2. id 选择器,理论上可以作为交集的条件,但实际应用中几乎不用,没有意义。
  3. 交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是p元素又是span元素
  4. 用的最多的交集选择器是:元素选择器配合类名选择器,例如:p.beauty

2.2 并集选择器

  • 作用:选中多个选择器对应的元素,又称为:分组选择器
  • 语法:选择器1,选择器2,选择器3,...选择器n {}
  • 举例:
1
2
3
4
5
6
7
8
9
.rich,
.beauty,
.dog,
.cat,
#jerry {
font-size: 60px;
background-color: black;
width: 250px;
}
  • 注意:
  1. 并集选择器中的各个选择器,一般竖着排版写
  2. 任何形式的选择器,都可以作为并集选择器的一部分
  3. 并集选择器,通常用于集体声明,可以缩小样式表体积

3.HTML 元素间的关系

  • 父元素:直接包裹某个元素的元素,就是该元素的父元素。
  • 子元素:被父元素直接包含的元素。
  • 祖先元素:父元素的父元素,一直往外找,都是祖先,父元素也算是祖先元素的一种。
  • 后代元素:子元素的子元素,一直往里找,都是后代,子元素也是后代元素的一种。
  • 兄弟元素:具有相同父元素的元素,互为兄弟元素。

4.后代选择器

  • 作用:选中指定元素中,复合要求的后代元素
  • 语法:选择器1 选择器2 选择器3 .... 选择器n {}(先写祖先,再写后代)

    选择器之间,用空格隔开。
    选择器 1、2、3、4、…n,可以是之前的任何一种选择器

  • 举例:
1
2
3
4
5
6
7
8
9
ul li{
color: red;
}
ol li{
color: green;
}
ul li a{
color: orange;
}
  • 注意:
  1. 后代选择器,最终选择的是后代,不选中祖先
  2. 儿子、孙子、重孙子,都算是后代
  3. 结构一定要复合之前讲的 HTML 嵌套要求,例如,不能在p标签中写h1~h6

5.子代选择器

  • 作用:选中指定元素中,符合要求的子元素。(先写父,再写子)

    子代选择器又称:子元素选择器、子选择器

  • 语法:选择器1 > 选择器2 > 选择器3 .... 选择器n {}

    选择器之间,用>隔开
    选择器 1234….n,可以是我们之前学的任何一种选择器

  • 举例:
1
2
3
4
5
6
7
8
9
10
11
div > a{
color: red;
}

div > p > a{
color: pink;
}

.end > a{
color: skyblue;
}
  • 注意
  1. 子代选择器,最终选择的是子代,不是父级。
  2. 子、孙子、重孙子等等统称后代!子就是指的儿子。

6.兄弟选择器

6.1 相邻兄弟选择器

  • 作用:选中指定元素后,符合条件的相邻兄弟元素

    所谓相邻,就是紧紧挨着这个元素的下一个元素

  • 语法:选择器1+选择2 {}
  • 示例:
1
2
3
4
/* 选中div后紧紧相邻的兄弟p元素 */
div + p {
color: red;
}

6.2 通用兄弟选择器

  • 作用:选中指定元素后,复合条件的所有兄弟元素。
  • 语法:选择器1~选择器2 {}
  • 示例:
1
2
3
4
/* 选中div后所有兄弟p元素 */
div ~ p {
color: red;
}
  • 注意:两种兄弟选择器,选择的都是下面的兄弟。

7.属性选择器

  • 作用:选中属性值复合一定要求的元素
  • 语法:
  1. [属性名]:选中具有某个属性的元素
  2. [属性名="值"]:选中包含某个属性,且属性值等于指定值的元素
  3. [属性名^="值"]:选中包含某个属性,且属性值以指定值开头的元素
  4. [属性名$="值"]:选中包含某个属性,且属性值以指定值结尾的元素
  5. [属性名*="值"]:选中包含某个属性,且属性值包含指定值的元素
  • 举例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 第一种写法:选中具有title属性的元素 */
[title] {
color: red;
}

/* 第二种写法:选中具有title属性,且属性值为alone的元素 */
[title="alone"] {
color: skyblue;
}

/* 第三种写法:选中具有title属性,且属性值以字母a开头的元素 */
[title^="g"] {
color: brown;
}

/* 第四种写法:选中具有title属性,且属性值以字母s结尾的元素 */
[title$="s"] {
color: pink;
}

/* 第五种写法:选中具有title属性,且属性值包含字母h的元素 */
[title*="h"] {
color: greenyellow;
}

8.伪类选择器

8.1 伪类选择器概念

  • 定义:很像类,但不是类,是元素特殊状态的一种描述
  • 作用:选中特殊状态的元素

8.2 动态伪类

  • :link:超链接未被访问的状态
  • :visited:超链接访问过的状态
  • :hover:鼠标悬停在元素上的状态
  • :active:元素激活的状态

    什么是激活?
    按下鼠标不松开
    注意点:样式表表中书写遵循LVHA的顺序,即:link、visited、hover、active

  • :focus获取焦点的元素

    表单类元素才能使用:focus伪类
    当用户:点击元素、触摸元素,或通过键盘的tab键等方式,选择元素时,就是获得焦点

8.3 结构伪类

8.3.1 结构伪类定义

知道了结构才能去找到对应元素

8.3.2 常用的结构伪类

  1. :first-child: 所有兄弟元素中的第一个
  2. p:last-child: 所有兄弟元素中的最后一个
  3. :nth-child(n): 所有兄弟元素中的第 n 个
  4. :first-of-type: 所有同类型兄弟元素中的第一个
  5. last-of-type:所有同类型兄弟元素中的最后一个
  6. nth-of-type(n):所有同类型兄弟元素中的第 n 个
  • 关于 n 的值
    1. 0 或者不写:什么都不选中 —- 几乎不用
    2. n:选中所有子元素 —- 几乎不用
    3. 1 ~ 正无穷的整数:选中对应序号的子元素
    4. 2n 或者 even : 选中序号为偶数的子元素
    5. 2n +1 或者 odd :选中序号为奇数的子元素
    6. -n + 5: 选中前三个子元素

8.3.3 不常用的结构伪类

  1. :nth-last-child(n): 所有兄弟元素中的倒数第 n 个
  2. :nth-last-of-type(n):所有同类型兄弟元素中的倒数第 n 个
  3. :only-child:选择没有兄弟的元素
  4. :only-of-type:选择没有同类型兄弟的元素
  5. :root:根元素
  6. :empty:内容为空的元素(空格也算内容)

8.4 否定伪类

  • 作用:排除满足括号中选择器条件的元素,括号中元素可以写其他选择器
  • 格式::not(选择器)
  • 示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 选中的是div的儿子p元素,但是排除类名为fail的元素 */
div>p:not(.fail){
color: red;
}

/* 选中的是div的儿子p元素,但是排除title属性值"需要加油"开头的元素 */
div>p:not([title^="需要加油"]){
color: blanchedalmond;
}

/* 选中的是div的儿子p元素,但是排除第一个儿子p元素 */
div>p:not(:first-child){
font-size: 45px;
}

8.5 UI 伪类

  • :checked:被选中的复选框或单选按钮
  • :enabled:可用的表单元素
  • disabled:不可用的表单元素(有disabled属性)

8.6 目标伪类

  • :target:选中锚点指向的元素

8.7 语言伪类

  • :lang():根据指定的语言选择元素(本质是看lang属性的值)

9.伪元素选择器

  • 作用:选中元素中的一些特殊位置
  • 常用的伪元素:
  1. ::first-letter:选中元素中的第一个文字
  2. ::first-line:选中元素中的第一行文字
  3. ::selection:选中被鼠标选中的内容
  4. ::placeholder:选中输入框的提示文字
  5. ::before:在元素最开始的位置,创建一个子元素(必须用content属性指定内容)
  6. ::after:在元素结尾的位置,创建一个子元素(必须用content属性指定内容)

10.选择器的优先级

10.1 简单分析

  • 通过不同的选择器,选中相同的元素,并且为相同的样式名设置不同的值时,就发生了样式的冲突。到底用哪个样式,此时就要看优先级了。
  • 简单描述:

    行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器

10.2 详细分析

有权重,先看权重,权重一样,后来居上

  • 权重计算格式:(a,b,c)
    a: ID 选择器的个数
    b:类、伪类、属性 选择器的个数
    c:元素、伪元素 选择器的个数
    a,b,c进行从左到右按位比较