css 中最重要的兩部分，一部分是 css 選擇器，另一部分是 css 屬性，本文將重點描述 css 選擇器。css 的工作流程本質上就是利用選擇器選擇到 html 中的元素，然後賦予他們樣式規則，讓每乙個元素都變成我們想要的樣子，都出現在我們想讓它去的位置。
css到目前位置已經擴充到第三版了，每擴充一版，它的選擇器和屬性都會有很多的擴充套件，這裡，我將把三個版本的選擇器一一進行詮釋。
css1選擇器
選擇器型別
說明tagname
標籤選擇器
選擇指定標籤的元素
#idid選擇器
通過id獲取元素
.class
類名選擇器
通過類名獲取元素
ele desc
後代選擇器
獲取包含在ele中 的desc元素，ele和desc均是選擇器
ele:link
偽類選擇器
超連結未被訪問的樣式
ele:visited
偽類選擇器
超連結已被訪問的樣式
ele:hover
偽類選擇器
滑鼠經過的樣式
ele:active
偽類選擇器
超連結被點選時的樣式
ele:focus
偽類選擇器
元素獲取焦點後的樣式
ele:first-line
偽元素選擇器
元素內的第一行文字
ele:first-letter
偽元素選擇器
元素內的第乙個字元
css2 選擇器
選擇器型別說明*
通用選擇器
選擇文件中所有的元素
ele[attr]
屬性選擇器
選取定義了attr屬性的ele元素
ele[attr=「val」]
屬性選擇器
選取定義了attr屬性且值為「val」的ele元素
ele[attr~=「val」]
屬性選擇器
選取定義了attr屬性且值中含有「val」單詞的ele元素
ele[attr|=「val」]
屬性選擇器
選取定義了attr屬性且值以「-」分割，「val」開頭的ele元素
ele:before
偽元素選擇器
在ele元素前面插入內容
ele:after
偽元素選擇器
在ele元素後面插入內容
ele > desc
後代選擇器
獲取desc元素，且是ele元素的子元素
ele + b
相鄰兄弟元素選擇器
選取與ele元素相鄰的b元素
css3 選擇器
選擇器型別
說明ele[attr^=「val」]
屬性選擇器
選取ele元素，且它含有attr屬性並以val開頭
ele[attr$=「val」]
屬性選擇器
選取ele元素，且它含有attr屬性並以val結尾
ele[attr*=「val」]
屬性選擇器
選取ele元素，且它含有attr屬性並在其中包含val
ele:first-child
結構偽類選擇器
選取ele元素，且是父元素的第乙個子元素
ele:last-child
結構偽類選擇器
選取ele元素，且是父元素的最後乙個子元素
ele:nth-child(n)
結構偽類選擇器
選取ele元素，且是父元素的第n個子元素
ele:nth-of-type (n)
結構偽類選擇器
選取ele元素，且是父元素中第n個ele元素
ele:nth-last-child(n)
結構偽類選擇器
選取ele元素，且是父元素的倒數第n個子元素
ele:nth-last-of-type(n)
結構偽類選擇器
選取ele元素，且是父元素的倒數第n個ele元素
ele:first-of-type(n)
結構偽類選擇器
選取ele元素，且是父元素的第1個ele元素
ele:last-of-type(n)
結構偽類選擇器
選取ele元素，且是父元素的最後乙個ele元素
ele:only-child
結構偽類選擇器
選取ele元素，且是父元素中的唯一元素
ele:only-of-type
結構偽類選擇器
選取ele元素，且是父元素中的唯一 的ele元素
ele:empty
結構偽類選擇器
選取ele元素，且不含子節點
ele:root
結構偽類選擇器
選取html根元素
:enabled
偽類選擇器
選擇每個啟用的input元素
:disable
偽類選擇器
選擇每個禁用的input元素
:checked
偽類選擇器
選擇每個選中的input元素
:not(selector)
偽類選擇器
去除所有與給定選擇器匹配的元素
::selection
偽類選擇器
選中文字的樣式
以上就是目前css規範中絕大部分屬性，一般而言，這些選擇器在複雜度比較高的頁面中也足夠用了，但是，由於選擇器眾多，可以用各種辦法選擇到同乙個元素，即css疊加性，再加上css某些屬性給父元素設定可以被子元素繼承，即css繼承性。由於這兩個特性，所以選擇器有了優先順序的概念。
至於判斷某個選擇器優先順序的方法，我們可以給出 a/b/c/d/e/f/g 七個等級，每乙個等級都比下乙個等級的優先順序高。
a 等級是行內樣式，擁有行內樣式，則a為1，否則a為0，換句話說，行內樣式是優先順序最高的，任何選擇器都不會覆蓋更改行內樣式的優先順序。
b 等級是id選擇器的數量，選擇器中含有乙個id，則b等級數值加1。
c 等級是類名選擇器、偽類選擇器、屬性選擇器的數量，每包含乙個，則c加1。
d 等級是標籤名選擇器、偽元素的數量，每包含乙個，則d加1。
e 等級是通用選擇器
f 等級瀏覽器預設的樣式
g 等級是繼承的樣式
優先順序順序中a>b>c>d>e>f>g。
CSS選擇器及其優先順序
標籤選擇器 tagname body 類選擇器 class id選擇器 id 通配選擇器 在css3中,星號 可以和命名空間組合使用 ns 會匹配ns命名空間下的所有元素 會匹配所有命名空間下的所有元素 會匹配所有沒有命名空間的元素 屬性選擇器 屬性選擇器通過已經存在的屬性名或屬性值匹配元素 語法 ...
CSS選擇器及其優先順序排序
css選擇器如下 css的選擇器其實大類的話可以分為三類，即id選擇器 class選擇器 標籤選擇器。用法如下 其中，他們之間又可以以不同的方式進行組合，如下 完整css選擇器參考手冊 下面列表中，選擇器型別的優先順序是遞增的 型別選擇器 type selectors 例如,h1 和 偽元素 pse...
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...