我們都知道，css具有疊加性（同乙個元素被多條樣式規則指定），繼承性（後代元素會繼承前輩元素的一些樣式和屬性）和優先順序 （由於css的疊加性和繼承性，將產生優先順序，這指的是哪條樣式規則會最終作用於指定的元素，他只遵循一條規則，指定的越具體，優先順序越高）
由上可知，選擇器指定的越具體，那麼他的優先順序就越高，
在這裡，我們來總結一下css的選擇器：
一、基本選擇器（標籤選擇器、通用選擇器、類和id選擇器）
選擇器描述
css版本
e標籤選擇器，匹配所有使用e標籤的元素
*通用元素選擇器，匹配任何元素
.info
class選擇器，匹配所有class屬性中包含info的元素
#footer
id選擇器，匹配所有id屬性等於footer的元素
二、多元素的組合選擇器（標籤選擇器[群組選擇器]、後代選擇器、子元素選擇器、相鄰選擇器）
選擇器描述
css版本
e，f多元素選擇器，同時匹配所有e元素或f元素，e和f之間用逗號隔開
e f包含選擇符，匹配所有被e元素包含的f元素
e>f
子元素選擇器，匹配所有e元素的兒子元素f
e+f毗鄰元素選擇器，匹配所有緊隨e元素之後的同級元素f
e~f匹配任何e標籤之後的同級f標籤
三、屬性選擇器
選擇器描述
css版本
e[attribute]
匹配所有具有attribute屬性的e元素，不考慮它的值。（注意：e在此處可以省略，比如「[cheacked]」。以下同。）
2.1e[attribute=value]
匹配所有attribute屬性等於「value」的e元素
2.1e[attribute~=value]
匹配所有attribute屬性具有多個空格分隔的值、其中乙個值等於「value」的e元素
2.1e[attribute^=value]
匹配任何e標籤之後的同級f標籤
2.1e[attribute$=value]
匹配所有attribute屬性值包含有「value」的e元素
3e[attribute*=value]
yoqqvgbv 匹配所有attribute屬性值是以"value"結束的e元素
3四、偽類選擇器
五、偽元素選擇器
選擇器描述
css版本
e:first-line
匹配所有e標籤內的第一行
2.1e:first-letter
匹配所有e標籤內的第乙個字母
2.1e:before
在e標籤之前插入生成的內容
2.1e:after
在e標籤之後插入生成的內容
2.1在這裡，我們需要知道的是瀏覽器是如何讀取選擇器的。chris coyier曾在《efficiently rendering css》一文中說過「瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行」。
選擇器的最後一部分，也就是選擇器的最右邊（在這個例子中就是a[title]部分）部分被稱為&ld程式設計客棧quo;關鍵選擇器」，它將決定你的選擇器的效率如何？是高還是低。
那麼如何讓關鍵選擇器更有效，效能化更高呢？其實很簡單，主要把握一點「越具體的關鍵選擇器，其效能越高」
選擇器有乙個固有的效率，我們來看steve souders給排的乙個順序：
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）
上面九種選擇器的效率是從高到低排下來的，基中id選擇器的效率是最高，而偽類選擇器的效率則是最低的。
我們來對比一下這幾個例項，看看誰的效率是最高的：
1. #myid span
2. span #myid
由上面的例子，我們可以知道，下面的效率要比上面的高。因為最右邊的關鍵選擇器是最具體的，也符合上述的選擇器優先順序順序。
本文標題: css中的選擇器種類總結及效率比較
本文位址: /web/css/84589.html
css中選擇器種類總結
b 1 型別選擇器 即html標籤選擇器 b 選擇器名稱 屬性 屬性值 如 h2 color white color red 關注點 不需要 號，不需要 號，就是 html標籤名稱 屬性 屬性值 color b 2 屬性選擇器 html標籤中的屬性選擇器，比如div 有align屬性 b 選擇器名稱...
Css選擇器的種類
選擇器有 全域性選擇器，組合選擇器，後代選擇器，子元素選擇器，巢狀選擇器，標籤選擇器，類選擇器，id選擇器，偽類選擇器這幾種。全域性選擇器 設定所有標籤使用同一樣式，用表示 全域性選擇器語法 全域性選擇器 設定所有標籤使用同一樣式，用表示 全域性選擇器語法 顯示效果 html 我是段落紅色 css ...
css選擇器種類介紹
1.標籤選擇器 用標籤名作為選擇器,就是指給同名的標籤統一加上外觀樣式,這種選擇器影響範圍大,一般用來做一些通用設定,或者層級選擇器中 例 div 這是第乙個div 這是第二個div 2.類選擇器 1.可使用class的屬性,把html網頁中的標籤進行分類,然後根據類名稱來進行設定 2.注意 1.使...