首页 > 代码库 > CSS选择器

CSS选择器

2024-07-21 07:20:07   230人阅读

1. 选择器浏览器支持情况

使用CSS选择器时，要考虑到不同浏览器下的支持情况，主要是IE的不同版本。

 

 

 

2. 选择器权重计算规则

  • x-0-0 : x表示ID选择器的个数
  • 0-x-0 : x表示类选择、属性选择器、伪类选择器个数
  • 0-0-x : x表示元素选择器个数
  • x-0-0-0 : 内联style
  • x-0-0-0-0: !important

note：

*,+,-,~, :not 不计入权重计算， 类选择器和属性选择器可看做是同一级

 

对号入座

ul#nav li.active a

 

3. 选择器效率

按照浏览器解析效率排序 由高到低

  • ID选择器(#header)
  • 类选择器(.promo)
  • 元素选择器(div)
  • 相邻选择器(h2 + p)
  • 子选择器(div > a)
  • 后代选择器(ul a)
  • 通配符选择器(*)
  • 属性选择器([type="text"])
  • 伪类选择器(a:hover)

 

4. 选择器解析顺序

浏览器是怎么查找元素的？浏览器解析 CSS 选择器的顺序是从右向左的。

div.cmn_tab .tools {    position: absolute;    right: 5px;    bottom: 8px;    z-index: 50;    line-height: 1.231;}

首先查找到页面中所有带class=tools的元素，然后再匹配遍历找到父节点带class=cmn_tab的元素，最后再匹配该元素标签名是否是div。

性能与可维护性的权衡

#nav .link{    background-color: red;}.link {    background-color: red;}

5. 选择器优化建议

不要在ID选择器前使用标签名或类名

div#nav{  }   //不建议.menu#nav { } //不建议#nav {}       //建议

不要在class选择器前用标签名

div.nav { }   //不建议.nav { }      //建议

多层标签选择器用class选择器替换，减少查找

table.cmn_table tr td span a.link { } //不建议.table-a-link { }       //建议

依靠继承

#menu-item .item {list-style-image: url(...)} //不建议#menu-item {list-style-image: url(...)} //建议

 

更详细内容，请看

CSS Compatibility in Internet Explorer

Specifics on CSS Specificity

Writing efficient CSS selectors

 

CSS选择器


联系
我们