CSS选择器
基本选择器
CSS
基本选择器用于选择 HTML
文档中的元素并应用样式
通配选择器
可以选中所有的 HTML
元素
1 | * { |
元素选择器
为页面中 某种元素 统一设置样式
1 | h1 { |
类选择器
根据元素的 class
值,来选中某些元素。class
翻译过来有:种类,类别的含义,所以 class
值,又称:类名
1 | .speak { |
注意点:
- 元素的
class
属性值不带.
,但 CSS 的类选择器要带.
class
值,是我们自定义的,按照标准:不要使用纯数字,不要使用中文,尽量使用英文与数字的组合,若由多个单词组成,使用-
做连接,例如:left-menu
,且命名要有意义,做到 "见名知意"- 一个元素不能写多个
class
属性,下面是 错误示例:
1 | <!-- 该写法错误,元素的属性不能重复,后写的会失效 --> |
- 一个元素的
class
属性,能写多个值,要用空格隔开,例如:
1 | <!-- 该写法正确,class属性,能写多个值 --> |
ID选择器
根据元素的 id
属性值,来精准地选中某个元素
1 | #earthy { |
注意:
id
属性值:尽量由字母,数字,下划线( _ )、短杠( - )组成,最好以字母开头,不要包含空格,区分大小写- 一个元素只能拥有一个
id
属性,多个元素的id
属性值不能相同 - 一个元素可以同时拥有
id
和class
属性
总结
基本选择器 | 特点 | 用法 |
---|---|---|
通配选择器 | 选中所有标签,一般用于清除样式 | * {color:red} |
元素选择器 | 选中所有同种标签,但是不能差异化选择 | h1 {color:red} |
类选择器 | 选中所有特定类名( class 值)的元素 — 使用频率很高 |
.say {color:red} |
ID 选择器 | 选中特定 id 值的那个元素(唯一的) |
#earthy {color:red} |
复合选择器
- 复合选择器建立在基本选择器之上,由多个基础选择器,通过不同的方式组合而成
- 复合选择器可以在复杂结构中,快速而准确的选中元素
交集选择器
选中同时符合多个条件的元素。语法:选择器1选择器2选择器3......选择器n {}
1 | p.beauty { |
注意:
- 有标签名,标签名必须写在前面
id
选择器、通配选择器,理论上可以作为交集的条件,但实际应用中几乎不用 — 因为没有意义- 交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是
p
元素又是span
元素 - 用的最多的交集选择器是:元素选择器配合类名选择器,例如:
p.beauty
并集选择器
选中多个选择器对应的元素,又称:分组选择器。语法:选择器1,选择器2,选择器3,......选择器n {}
1 | .rich, |
注意:
- 并集选择器,我们一般竖着写
- 任何形式的选择器,都可以作为并集选择器的一部分
- 并集选择器,通常用于集体声明,可以缩小样式表体积
后代选择器
选中指定元素中,符合要求的后代元素。语法:选择器1 选择器2 选择器3 ...... 选择器n {}
(先写祖先,再写后代)
1 | /* 选中类名为subject元素中的所有类名为front-end的li */ |
注意:
- 后代选择器,最终选择的是后代,不选中祖先
- 儿子、孙子、重孙子,都算是后代
- 结构一定要符合之前讲的
HTML
嵌套要求,例如:不能p
中写h1 ~ h6
。
子代选择器
选中指定元素中,符合要求的子元素(儿子元素)。(先写父,再写子)。子代选择器又称:子元素选择器,子选择器。语法:选择器1 > 选择器2 > 选择器3 > ...... > 选择器n {}
1 | .persons > a{ |
注意:
- 子代选择器,最终选择的是子代,不是父级
- 子、孙子、重孙子、重重孙子 …… 统称后代!,子就是指儿子
兄弟选择器
相邻兄弟选择器:
- 作用:选中指定元素后,符合条件的相邻兄弟元素。所谓相邻,就是紧挨着他的下一个,简记:睡在我下铺的兄弟
- 语法:
选择器1 + 选择器2 {}
- 示例:
1 | /* 选中div后相邻的兄弟p元素 */ |
- 通用兄弟选择器:
- 作用:选中指定元素后,符合条件的所有兄弟元素。(简记:睡在我下铺的所有兄弟)
- 语法:
选择器1 ~ 选择器2 {}
- 示例:
1 | /* 选中div后的所有的兄弟p元素 */ |
- 注意:两种兄弟选择器,选择的是下面的兄弟
属性选择器
选中属性值符合一定要求的元素。语法:
[属性名]
选中具有某个属性的元素[属性名="值"]
选中包含某个属性,且属性值等于指定值的元素[属性名^="值"]
选中包含某个属性,且属性值以指定的值开头的元素[属性名$="值"]
选中包含某个属性,且属性值以指定的值结尾的元素[属性名*=“值”]
选择包含某个属性,属性值包含指定值的元素
1 | /* 选中具有title属性的元素 */ |
伪类选择器
选中特殊状态的元素。常用的伪类选择器:
动态伪类
:link
超链接未被访问的状态:visited
超链接访问过的状态:hover
鼠标悬停在元素上的状态:active
元素激活的状态:focus
获取焦点的元素
结构伪类
:first-child
所有兄弟元素中的第一个:last-child
所有兄弟元素中的最后一个:nth-child(n)
所有兄弟元素中的第 n 个:first-of-type
所有同类型兄弟元素中的第一个:last-of-type
所有同类型兄弟元素中的最后一个:nth-of-type(n)
所有同类型兄弟元素中的第n个
关于 n 的值:
- 了解即可
:nth-last-child(n)
所有兄弟元素中的倒数第 n 个:nth-last-of-type(n)
所有同类型兄弟元素中的倒数第n个:only-child
选择没有兄弟的元素(独生子女):only-of-type
选择没有同类型兄弟的元素:root
根元素:empty
内容为空元素(空格也算内容)
否定伪类
:not(选择器)
排除满足括号中条件的元素
UI伪类
:checked
被选中的复选框或单选按钮:enable
可用的表单元素(没有 disabled 属性):disabled
不可用的表单元素(有 disabled 属性)
目标伪类(了解)
:target
选中锚点指向的元素
语言伪类(了解)
:lang()
根据指定的语言选择元素(本质是看 lang
属性的值)
伪元素选择器
选中元素中的一些特殊位置。常用伪元素:
::first-letter
选中元素中的第一个文字::first-line
选中元素中的第一行文字::selection
选中被鼠标选中的内容::placeholder
选中输入框的提示文字::before
在元素最开始的位置,创建一个子元素(必须用content
属性指定内容)::after
在元素最后的位置,创建一个子元素(必须用content
属性指定内容)
选择器的优先级(权重)
通过不同的选择器,选中相同的元素 ,并且为相同的样式名设置不同的值时,就发生了样式的冲突。到底应用哪个样式,此时就需要看优先级了。
- 计算方式:每个选择器,都可计算出一组权重,格式为: (a,b,c)
- a : ID 选择器的个数。
- b : 类、伪类、属性 选择器的个数。
- c : 元素、伪元素 选择器的个数。
- 比较规则:按照从左到右的顺序,依次比较大小,当前位胜出后,后面的不再对比
- 特殊规则:
- 行内样式权重大于所有选择器
!important
的权重,大于行内样式,大于所有选择器,权重最高!
评论