css选择器知识汇总

太过爱你忘了你带给我的痛 2022-10-01 12:53 136阅读 0赞

## css选择器知识汇总 ##

对于大多数程序员来说，都很熟悉css选择器，也深知其重要性。打个比方说：我们给一个标签设定了一个class类，设定属性和样式，但是最终页面却没有显示我们给class中设定的样式，属性没有起作用。这个时候突然意识到了CSS选择器的优先级问题。

严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。

CSS选择器效率从高到低的排序如下：

1.id选择器（\#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.相邻选择器（h1+p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（\*）

8.属性选择器（a\[rel=“external”\]）

9.伪类选择器（a:hover, li:nth-child）

**选择器的优先级是怎么规定的呢？**

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。比如上例当中 .polaris span \{color:red;\}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：

div.test1 .span var 优先级 1+10 +10 +1
    span#xxx .songs li 优先级1+100 + 10 + 1
    
    #xxx li 优先级 100 + 1

对于什么情况下使用什么选择器，用不同选择器的原则是：

1、准确的选到要控制的标签；

2、使用最合理优先级的选择器；

3、HTML和CSS代码尽量简洁美观。

**怎么提升CSS选择器性能？**

1、避免使用通用选择器

.content  {color: red;}

浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。

2、避免使用标签或 class 选择器限制 id 选择器

BAD
    button#backButton {…}
    BAD
    .menu-left#newMenuIcon {…}
    GOOD
    #backButton {…}
    GOOD
    #newMenuIcon {…}

3、避免使用标签限制 class 选择器