赞助我以写出更好的文章

如果您觉得文章对您有帮助，可以逐个点击以下链接，类似于GOOGLE ads，不需要您付出任何费用，每天都可以来点一次噢，费用将由广告商承担，give me a cup of coffee?

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

我们都知道，CSS具有叠加性（同一个元素被多条样式规则指定），继承性（后代元素会继承前辈元素的一些样式和属性）和优先级 （由于CSS的叠加性和继承性，将产生优先级，这指的是哪条样式规则会最终作用于指定的元素，他只遵循一条规则，指定的越具体，优先级越高）

由上可知，选择器指定的越具体，那么他的优先级就越高，

在这里，我们来总结一下css的选择器：

一、基本选择器（标签选择器、通用选择器、类和ID选择器）

二、多元素的组合选择器（标签选择器[群组选择器]、后代选择器、子元素选择器、相邻选择器）

三、属性选择器

四、伪类选择器

五、伪元素选择器

在这里，我们需要知道的是浏览器是如何读取选择器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行”。

选择器的最后一部分，也就是选择器的最右边（在这个例子中就是a[tITle]部分）部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。

那么如何让关键选择器更有效，性能化更高呢？其实很简单，主要把握一点“越具体的关键选择器，其性能越高”

选择器有一个固有的效率，我们来看Steve Souders给排的一个顺序：

                id选择器（#myid）
                类选择器（.myclassname）
                标签选择器（div,h1,p）
                相邻选择器（h1+p）
                子选择器（ul > li）
                后代选择器（li a）
                通配符选择器（*）
                属性选择器（a[rel="external"]）
                伪类选择器（a:hover,li:nth-child）

上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最低的。

我们来对比一下这几个实例，看看谁的效率是最高的：

1.  #myId span

<br/>

  2.  span #myId

由上面的例子，我们可以知道，下面的效率要比上面的高。因为最右边的关键选择器是最具体的，也符合上述的选择器优先级顺序。