CSS选择器一览表

最新推荐文章于 2024-03-09 15:07:37 发布

Serena_tz

最新推荐文章于 2024-03-09 15:07:37 发布

阅读量317

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/Serena_tz/article/details/116303528

版权

css 专栏收录该内容

32 篇文章

订阅专栏

1 基本选择器

通配符选择器 * { }
元素选择器 body { }
类选择器 .list { }
ID选择器 #list { }
后代选择器 .list li { }

2 基本选择器扩展

子元素选择器 #wrap > .inner { }
也可称为直接后代选择器,只能匹配到直接后代，不能匹配到深层次的后代元素
相邻兄弟选择器 #wrap #first + .inner { }
只会匹配紧跟着的兄弟元素
通用兄弟选择器 #wrap #first ~ div { }
会匹配所有的兄弟元素(不需要紧跟)
选择器分组 h1,h2,h3{ }
此处的逗号我们称之为结合符

3 属性选择器

存在和值属性选择器
- [attr]：该选择器选择包含 attr属性的所有元素，不论 attr的值是什么。
- [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
- [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
子串值属性选择器
- [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
- [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
- [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
- [attr*=val] : 选择attr属性的值中包含字符串val的元素。

4 伪类与伪元素选择器

链接伪类 – 注意:link，:visited，:target是作用于链接元素的！
- :link 表示作为超链接，并指向一个未访问的地址的所有锚
- :visited 表示作为超链接，并指向一个已访问的地址的所有锚
- :target 代表一个特殊的元素，它的id是URI的片段标识符
动态伪类 – 注意:hover，:active基本可以作用于所有的元素！
- :hover 表示悬浮到元素上
- :active 表示匹配被用户激活的元素（点击按住时）
  【注意🔔】由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！
  【注意🔔】隐私与:visited选择器只有下列的属性才能被应用到已访问链接：color、background-color、border-color。
表单相关伪类
- :enabled – 匹配可编辑的表单
- :disable – 匹配被禁用的表单
- :checked – 匹配被选中的表单
- :focus – 匹配获焦的表单
结构性伪类
- index的值从1开始计数！
- index可以为变量n(只能是n)
- index可以为even odd
  #wrap ele:nth-child(index) – 表示匹配#wrap中第index的子元素这个子元素必须是ele。
  #wrap ele:nth-of-type(index) – 表示匹配#wrap中第index的ele子元素。
  【除此之外】：nth-child和:nth-of-type有一个很重要的区别：nth-of-type以元素为中心！
- :nth-child(index)系列
  - :first-child
  - :last-child
  - :nth-last-child(index)
  - :only-child (相对于:first-child:last-child或者 :nth-child(1):nth-last-child(1))
- :nth-of-type(index)系列
  - :first-of-type
  - :last-of-type
  - :nth-last-type(index)
  - :only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
- :not
- :empty(内容必须是空的，有空格都不行，有attr没关系)
伪元素
- ::after
- ::before
- ::firstLetter
- ::firstLine
- ::selection

5 声明的优先级

5.1 选择器的特殊性

选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0。
一个选择器的具体特殊性如下确定：

对于选择器中给定的ID属性值，加 0,1,0,0
对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
对于选择器中的给定的各个元素和伪元素，加0,0,0,1
通配符选择器的特殊性为0,0,0,0
结合符对选择器特殊性没有一点贡献
内联声明的特殊性都是1,0,0,0
继承没有特殊性

【注意 🔔】：

特殊性 [1,0,0,0 ]大于所有以0开头的特殊性(不进位)；
选择器的特殊性最终都会授予给其对应的声明；
如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势。

【注意 🔔】：

id选择器和属性选择器的特殊性分别为：div[id="test"]（0,0,1,1）和 #test（0,1,0,0）。

5.2 重要声明

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明。并允许在这些声明的结束分号之前插入 !important来标志，必须要准确的放置 !important，否则声明无效。 !important总是要放在声明的最后，即分号的前面。标志为!important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决。非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决。如果一个重要声明与非重要声明冲突，胜出的总是重要声明。