1.基本选择器
基本选择器包括:
1.1 通配选择器
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 选择器
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; }
|
- 有标签名、标签名必须写在前面。
- id 选择器,理论上可以作为交集的条件,但实际应用中几乎不用,没有意义。
- 交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是
p
元素又是span
元素 - 用的最多的交集选择器是:元素选择器配合类名选择器,例如:
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; }
|
- 并集选择器中的各个选择器,一般竖着排版写
- 任何形式的选择器,都可以作为并集选择器的一部分
- 并集选择器,通常用于集体声明,可以缩小样式表体积
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; }
|
- 后代选择器,最终选择的是后代,不选中祖先
- 儿子、孙子、重孙子,都算是后代
- 结构一定要复合之前讲的 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; }
|
- 子代选择器,最终选择的是子代,不是父级。
- 子、孙子、重孙子等等统称后代!子就是指的儿子。
6.兄弟选择器
6.1 相邻兄弟选择器
- 作用:选中指定元素后,符合条件的相邻兄弟元素
所谓相邻,就是紧紧挨着这个元素的下一个元素
- 语法:
选择器1+选择2 {}
- 示例:
1 2 3 4
| div + p { color: red; }
|
6.2 通用兄弟选择器
- 作用:选中指定元素后,复合条件的所有兄弟元素。
- 语法:
选择器1~选择器2 {}
- 示例:
1 2 3 4
| div ~ p { color: red; }
|
7.属性选择器
[属性名]
:选中具有某个属性的元素[属性名="值"]
:选中包含某个属性,且属性值等于指定值的元素[属性名^="值"]
:选中包含某个属性,且属性值以指定值开头的元素[属性名$="值"]
:选中包含某个属性,且属性值以指定值结尾的元素[属性名*="值"]
:选中包含某个属性,且属性值包含指定值的元素
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] { color: red; }
[title="alone"] { color: skyblue; }
[title^="g"] { color: brown; }
[title$="s"] { color: pink; }
[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 常用的结构伪类
:first-child
: 所有兄弟元素中的第一个p:last-child
: 所有兄弟元素中的最后一个:nth-child(n)
: 所有兄弟元素中的第 n 个:first-of-type
: 所有同类型兄弟元素中的第一个last-of-type
:所有同类型兄弟元素中的最后一个nth-of-type(n)
:所有同类型兄弟元素中的第 n 个
- 关于 n 的值:
- 0 或者不写:什么都不选中 —- 几乎不用
- n:选中所有子元素 —- 几乎不用
- 1 ~ 正无穷的整数:选中对应序号的子元素
- 2n 或者 even : 选中序号为偶数的子元素
- 2n +1 或者 odd :选中序号为奇数的子元素
- -n + 5: 选中前三个子元素
8.3.3 不常用的结构伪类
:nth-last-child(n)
: 所有兄弟元素中的倒数第 n 个:nth-last-of-type(n)
:所有同类型兄弟元素中的倒数第 n 个:only-child
:选择没有兄弟的元素:only-of-type
:选择没有同类型兄弟的元素:root
:根元素:empty
:内容为空的元素(空格也算内容)
8.4 否定伪类
- 作用:排除满足括号中选择器条件的元素,括号中元素可以写其他选择器
- 格式:
:not(选择器)
- 示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| div>p:not(.fail){ color: red; }
div>p:not([title^="需要加油"]){ color: blanchedalmond; }
div>p:not(:first-child){ font-size: 45px; }
|
8.5 UI 伪类
:checked
:被选中的复选框或单选按钮:enabled
:可用的表单元素disabled
:不可用的表单元素(有disabled
属性)
8.6 目标伪类
8.7 语言伪类
:lang()
:根据指定的语言选择元素(本质是看lang
属性的值)
9.伪元素选择器
::first-letter
:选中元素中的第一个文字::first-line
:选中元素中的第一行文字::selection
:选中被鼠标选中的内容::placeholder
:选中输入框的提示文字::before
:在元素最开始的位置,创建一个子元素(必须用content
属性指定内容)::after
:在元素结尾的位置,创建一个子元素(必须用content
属性指定内容)
10.选择器的优先级
10.1 简单分析
- 通过不同的选择器,选中相同的元素,并且为相同的样式名设置不同的值时,就发生了样式的冲突。到底用哪个样式,此时就要看优先级了。
- 简单描述:
行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器
10.2 详细分析
有权重,先看权重,权重一样,后来居上
- 权重计算格式:
(a,b,c)
a
: ID 选择器的个数
b
:类、伪类、属性 选择器的个数
c
:元素、伪元素 选择器的个数
a,b,c
进行从左到右按位比较


