css选择器

  1. 元素选择器
    特殊性:0-0-0-1
  2. 类选择器
    特殊性:0-0-1-0
  3. ID选择器
    特殊性:0-1-0-0
  4. 关系选择器
    特殊性: 结合符(+ ~ *)对特定性没有任何贡献
  5. 属性选择器
    特殊性: 0-0-1-0
  6. 伪类
    特殊性: 0-0-1-0
    用例:斑马表格背景
    : nth-child(n) 其父元素的第nth个子元素
    : nth-of-type(n) 其同类型的第nth个兄弟元素
    : not 否定伪类自身没有任何值,但是它的参数的权重会被增加到整个选择器的权重上。
  7. 伪元素
    特殊性: 0-0-0-1
    常用的: ::before ::after

特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

层叠规则:

  • 更特定的规则优先于更一般的规则。如果特定性上相等,则后面的规则优先于前面的规则。
  • 一个单独的ID选择器具有比一个具有任何数量类的选择器更高的权重。
  • 内联和!important会破坏层叠规则
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,875评论 0 5
  • class 和 id 的使用场景? class写专门的class通用和私有模块命名,id具有唯一性且优先级太高,用...
    好好顽阅读 431评论 0 0
  • 一.class 和 id 的使用场景? name:指定标签的名称应用场景:①form表单:name可作为传递给服务...
    Sunset125阅读 987评论 0 0
  • class 和 id 的使用场景? 类class选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使...
    Vincent_永阅读 311评论 0 0
  • 1. class 和 id 的使用场景: id:id选择器,使用#name定义(name为id名,可任意取名),使...
    石林涛阅读 390评论 0 1