CSS中的選擇器種類總結及效率比較範例-css教學-PHP中文網

CSS中的選擇器種類總結及效率比較範例

高洛峰

發布： 2017-03-09 16:22:35

原創

1546 人瀏覽過

這篇文章主要介紹了CSS中的選擇器種類總結及效率比較,包括偽類選擇器和偽元素選擇器等,需要的朋友可以參考下

我們都知道，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標籤

三、屬性選擇器

##符合所有attribute屬性具有多個空格分隔的值、其中一個值等於「value」的E元素2.1E[attribute^=value]匹配任何E標籤之後的同級F標籤2.1#E[attribute$=value]匹配所有attribute屬性值包含有「value 」的E元素3E[attribute*=value]#符合所有attribute屬性值是以「value」結束的E元素3

選擇器	#描述	CSS版本
E[attribute]	匹配所有具有attribute屬性的E元素，不考慮它的值。（注意：E在此處可以省略，例如“[cheacked]”。以下相同。）	2.1
E[attribute=value]	符合所有attribute屬性等於「value」的E元素	2.1
E[attribute~=value]

四、偽類別選擇器

#五、偽元素選擇器

#選擇器E:first-lineE:first-letterE:beforeE:after

在這裡，我們需要知道的是瀏覽器是如何讀取選擇器的。 Chris Coyier曾在《Efficiently Rendering CSS》一文中說過「瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行」。

選擇器的最後一部分，也就是選擇器的最右邊（在這個例子中就是a[title]部分）部分被稱為“關鍵選擇器”，它將決定你的選擇器的效率如何？是高還是低。

那麼如何讓關鍵選擇器更有效，效能化更高呢？其實很簡單，主要把握一點「越具體的關鍵選擇器，其性能越高」

選擇器有一個固有的效率，我們來看Steve Souders給排的一個順序：

                1.id選擇者（#myid）
              標籤選擇器（p,h1,p）
                4.鄰近選擇器（h1+p ）
                5.子選擇者（ul >li）
              7.通配符選擇器（*）
                8.屬性選擇器（a[rel ="external"]）
               的效率是最高，而偽類選擇器的效率是最低的。

我們來比較這幾個實例，看看誰的效率是最高的：

1. #myId span 2. span #myId

由上面的例子，我們可以知道，下面的效率要比上面的更高。因為最右邊的關鍵選擇器是最具體的，也符合上述的選擇器優先順序。

##描述	#CSS版本
符合所有E標籤內的第一行	2.1
符合所有E標籤內的第一個字母	2.1
在E標籤之前插入產生的內容	2.1
在E標籤之後插入產生的內容	2.1

以上是CSS中的選擇器種類總結及效率比較範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！