我們都知道，CSS具有疊加性（同一個元素被多條樣式規(guī)則指定），繼承性（后代元素會繼承前輩元素的一些樣式和屬性）和優(yōu)先級 （由于CSS的疊加性和繼承性，將產(chǎn)生優(yōu)先級，這指的是哪條樣式規(guī)則會最終作用于指定的元素，他只遵循一條規(guī)則，指定的越具體，優(yōu)先級越高）
由上可知，選擇器指定的越具體，那么他的優(yōu)先級就越高，
在這里，我們來總結(jié)一下css的選擇器：
一、基本選擇器（標(biāo)簽選擇器、通用選擇器、類和ID選擇器）
| 選擇器 | 描述 | CSS版本 |
|---|---|---|
| E | 標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素 | |
| * | 通用元素選擇器，匹配任何元素 | |
| .info | class選擇器，匹配所有class屬性中包含info的元素 | |
| #footer | id選擇器，匹配所有id屬性等于footer的元素 |
二、多元素的組合選擇器（標(biāo)簽選擇器[群組選擇器]、后代選擇器、子元素選擇器、相鄰選擇器）
| 選擇器 | 描述 | CSS版本 |
|---|---|---|
| E，F(xiàn) | 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號隔開 | |
| E F | 包含選擇符，匹配所有被E元素包含的F元素 | |
| E>F | 子元素選擇器，匹配所有E元素的兒子元素F | |
| E+F | 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F | |
| E~F | 匹配任何E標(biāo)簽之后的同級F標(biāo)簽 |
三、屬性選擇器
| 選擇器 | 描述 | CSS版本 |
|---|---|---|
| E[attribute] | 匹配所有具有attribute屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。） | 2.1 |
| E[attribute=value] | 匹配所有attribute屬性等于“value”的E元素 | 2.1 |
| E[attribute~=value] | 匹配所有attribute屬性具有多個空格分隔的值、其中一個值等于“value”的E元素 | 2.1 |
| E[attribute^=value] | 匹配任何E標(biāo)簽之后的同級F標(biāo)簽 | 2.1 |
| E[attribute$=value] | 匹配所有attribute屬性值包含有“value”的E元素 | 3 |
| E[attribute*=value] | 匹配所有attribute屬性值是以"value"結(jié)束的E元素 | 3 |
四、偽類選擇器
五、偽元素選擇器
| 選擇器 | 描述 | CSS版本 |
|---|---|---|
| E:first-line | 匹配所有E標(biāo)簽內(nèi)的第一行 | 2.1 |
| E:first-letter | 匹配所有E標(biāo)簽內(nèi)的第一個字母 | 2.1 |
| E:before | 在E標(biāo)簽之前插入生成的內(nèi)容 | 2.1 |
| E:after | 在E標(biāo)簽之后插入生成的內(nèi)容 | 2.1 |
在這里，我們需要知道的是瀏覽器是如何讀取選擇器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中說過“瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行”。
選擇器的最后一部分，也就是選擇器的最右邊（在這個例子中就是a[title]部分）部分被稱為“關(guān)鍵選擇器”，它將決定你的選擇器的效率如何？是高還是低。
那么如何讓關(guān)鍵選擇器更有效，性能化更高呢？其實很簡單，主要把握一點“越具體的關(guān)鍵選擇器，其性能越高”
選擇器有一個固有的效率，我們來看Steve Souders給排的一個順序：
1.id選擇器（#myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div,h1,p）
4.相鄰選擇器（h1+p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（*）
8.屬性選擇器（a[rel="external"]）
9.偽類選擇器（a:hover,li:nth-child）
上面九種選擇器的效率是從高到低排下來的，基中ID選擇器的效率是最高，而偽類選擇器的效率則是最低的。
我們來對比一下這幾個實例，看看誰的效率是最高的：
1. #myId span
2. span #myId
由上面的例子，我們可以知道，下面的效率要比上面的高。因為最右邊的關(guān)鍵選擇器是最具體的，也符合上述的選擇器優(yōu)先級順序。
新聞熱點
疑難解答
