css中的选择器及其权重
????????在 css (層疊樣式表)中對 html 中的元素設定具體的樣式，主要由選擇器和聲明塊兩個部分組成。選擇器是用于指定所設置樣式對應的 html 標簽。聲明塊由若干個用分號分開的樣式聲明組成，這些樣式聲明的屬性和屬性值以“鍵值對”(屬性：屬性值）的形式出現，當出現多個屬性值時使用空格隔開。具體是為哪些元素設定樣式由選擇器決定，當出現樣式層疊時（使用不同的選擇器但是匹配到的是同一個元素且設置的是同一個樣式屬性）由選擇器的權重或者在樣式表中的位置決定。以下是對選擇器和其權重的總結復習。
基本選擇器
通配符選擇器
????????通配符選擇器使用 " * " 來定義，用來匹配所有的元素，他的權重是 0,0,0,0，常用于清除瀏覽器的默認樣式。
/*匹配所有的元素并為他們設置 background-color 屬性*/ * {background-color:yellow; } /*匹配div元素內的所有元素并為他們設置 background-color 屬性*/ div * {background-color:yellow; }標簽選擇器
????????標簽選擇器使用 “elementName” 來定義，標簽選擇器（元素選擇器）是指用 html 標簽名作為選擇器，按標簽名稱分類，為頁面中的某一類標簽指定統一的 css 樣式。標簽選擇器的權重是 0,0,0,1。
/*為所有的span標簽設置color屬性*/ span {color:red; }作用：標簽選擇器可以把某一類標簽全部選擇出來，比如所有的<span> 標簽。
優點：能為頁面中的同類型標簽統一設置樣式。
缺點：不能設置差異化樣式，只能選擇全部當前標簽。
類選擇器
????????類選擇器使用 “.className” 來定義，如果想要差異性選擇不同的標簽，單獨挑一個或者某幾個標簽，可以使用類選擇器。（可以把一些標簽元素共同具有的樣式放到同一個類里面，這些元素可以添加這個公共的類然后再添加自己獨有的類）。
<style>/*這三個元素具有相同的margin屬性樣式，所以將他們放在同一個類中*/.cont {margin:0 auto;}/*background-color屬性是最后一個元素獨有的屬性樣式（或和其他的元素的屬性值不同），所以可以將last定義為它獨有的一個類。*/.last {background-color:yellow;} </style> <div class="cont info"></div> <div class="cont"></div> <div class="cont last"></div>id選擇器
????????id 選擇器使用" #idName "來定義, id 選擇器一般用于選擇頁面唯一性的元素，經常和 javascript 搭配使用。它的權重是 0,1,0,0。
<style>/* 為id為"pwd"的表單項設置width樣式 */#pwd {width: 300px;} </style> <input type="password" id="pwd" />其他重要的選擇器
偽元素選擇器
????????偽元素選擇器主要有 :after 和 :before，:after 選擇器向指定元素的最后面插入內容（新的元素）；:before 選擇器向指定元素的最前面插入內容（新的元素）。可以使用 content 屬性來指定要插入的內容。他們的權重是 0,0,0,1（同元素選擇器）。偽元素常用來清除浮動或者用來添加不必出現在 html 結構文件中的元素以簡化結構。
<style>/*在所有的 p 元素的最后面添加一個元素*/p:after { display:block;content:"添加的內容";} </style> <body><p>我的名字是 Donald</p><p>我住在 Ducksburg</p> </body>偽類選擇器
????????偽類選擇器個人理解就是選擇某些具有特殊特征的類型元素，這些特征可能和 html 結構有關（結構偽類）或者無關，但他們又確實是 html 中的特定特征的一類元素并不像偽元素那樣是通過 css 添加的元素（兩者的區別）。他們的權重是 0,0,1,0（同類選擇器）。
- <a>元素偽類
需要注意的是這四個偽類的書寫順序：
其實 :hover 和 :active 不只對 a 元素有效，也可以應用于其他元素。
- 表單元素偽類
表單偽類 :focus 主要是用于獲得焦點的表單元素
結構偽類選擇器
????????結構偽類選擇器用于選擇具有某些特定特征的一類元素的選擇器，他們的這些特征和 html 結構（在 html 中的位置）有關。他們的權重是 0,0,1,0（同類選擇器）。
| E:first-child | 匹配其父元素中的第一個子元素且這個子元素是E元素。 |
| E:last-child | 匹配其父元素中的最后一個子元素且這個子元素是E元素。 |
| E:nth-child(n) | 匹配其父元素中的第n個子元素且這個子元素是E元素。 |
| E:first-of-type | 匹配子元素中的第一個E元素。 |
| E:last-of-type | 匹配子元素中的最后一個E元素。 |
| E:nth-of-type(n) | 匹配子元素中的第n個E元素。 |
1、n的值可以是數字、關鍵字、表達式。
- 數字：n直接使用數字表示匹配第幾個子元素。
- 關鍵字：使用even和odd分別表示偶數和奇數。
- 表達式：2n（偶數）、2n+1（奇數）、5n、n+n0（第n0個子元素及后面的子元素）、-n+n0（前n0個子元素）。
2、如果沒有添加前面那個元素選擇器（不采用復合方式），第一種寫法只會選中父元素中特定位置的子元素(不對子元素進行分類處理)；第二種會先將父元素中的各類子元素分別排序后，每類選擇特定位置元素。
<style>/*選擇器1：匹配第一個子元素且是p元素；選擇器2：匹配第四個子元素但不是p元素，所以無效。選擇器3：匹配子元素中的第二個p元素，即第三個子元素。*/p:nth-child(1) {color: red;}p:nth-child(4) {color: red;}p:nth-of-type(2) {color: red;}/*選擇器1：匹配序號為奇數的子元素且是p元素。若括號內是even關鍵字則只會匹配到最后一個（第六個）子元素，因為第二個和第四個子元素不是p元素。*/p:nth-child(odd){color: red;}/*選擇器1：匹配第三個及后面為p元素的子元素，第四個不是p元素無效；選擇器2：匹配前面兩個為p元素的子元素，第二個不是p元素無效。*/p:nth-child(n+3){color: red;}p:nth-child(-n+2){color: blue;}</style> <body><p>第1個p元素，第一個子元素</p><div>第1個div元素，第二個子元素</div><p>第2個p元素，第三個子元素</p><div>第2個div元素，第四個子元素</div><p>第3個p元素，第五個子元素</p><p>第4個p元素，第六個子元素</p> </body>代碼演示的結果如圖
- 注意 E:nth-child(n) 和 E:nth-of-type(n) 的區別: E:nth-child(n)是先匹配父元素中的第n個子元素（不分類型進行排序選擇），再檢查匹配到的元素是否是E類型的子元素，是則有效，不是則無效。E:nth-of-type(n)則是先對父元素內E類型的子元素進行排序，再進行對n匹配。（即前者先匹配 n 再匹配 E ，后者先匹配 E 再匹配 n）
- 注意括號內是表達式時 n 的值是從0開始的。
屬性選擇器
????????屬性選擇器根據特定的屬性和屬性值特征來匹配元素。他們的權重是 0,0,1,0。下表使用交集選擇器進行示范，使用時可以不使用，直接使用屬性選擇器。
| E[att] | 匹配具有 att 屬性的E元素。 |
| E[att=“val”] | 匹配具有 att 屬性且值等于val的E元素。 |
| E[att^=“val”] | 匹配att屬性值以 val 開頭的E元素。 |
| E[att$=“val”] | 匹配att屬性值以 val 結尾的E元素。 |
| E[att*=“val”] | 匹配att屬性值中含有 val 的E元素。 |
| E[att~=“val”] | 匹配att屬性的屬性值中具有 val 這個值的E元素。 |
| E[att|=“val”] | 匹配 att 屬性的屬性值帶有以指定值開頭的元素，該值必須是整個單詞 |
E[att=“val”]和E[att~=“val”]的差別：當一個屬性具有多個屬性值時，例如class屬性，前者要求屬性必須與屬性值完全匹配，即所有屬性值都要寫；后者只要求匹配其中一個。
復合選擇器
后代選擇器
????????后代選擇器用 “elementName elementName” 來定義，作用是選出指定元素中的后代元素。
<style>/*選擇.topnav元素中的所有a標簽并設置font樣式，四個a元素都會被選擇，因為他們都是指定元素的后代元素*/.topnav a {font:18px/54px "微軟雅黑";} </style> <div class="topnav"><a href="#"></a><nav><a href="#"></a><a href="#"></a><a href="#"></a> </nav> </div>子代選擇器
????????子代選擇器用 “elementName>elementName” 來定義，作用是選出指定元素中的子元素。
<style>/*選擇是.topnav元素的子元素的a標簽并設置font樣式，只有第一個a元素會被選擇，因為只有它和nav標簽才是指定元素的子元素*/.topnav>a {font:18px/54px "微軟雅黑";} </style> <div class="topnav"><a href="#"></a><nav><a href="#"></a><a href="#"></a><a href="#"></a> </nav> </div>并集選擇器
????????并集選擇器用 “selector1,selector2” 來定義，作用是同時選出多個元素并指定樣式。
<style>/*同時選擇 h2 元素和 a 元素并為他們設置相同的樣式*/h2,a{font:18px/54px "微軟雅黑";} </style> <body><article><h1></h1><h2></h2><nav><a href="#"></a><a href="#"></a></nav> </article> </body>交集選擇器（補充）
????????交集選擇器用 “selector1selector2” 來定義，作用是選出既是selector1元素又是selector2的元素即同時滿足兩個條件。
<style>/*選擇類名是search_btn同時是button標簽的元素*/button.search_btn {width:88px;} </style> <body><button class="search_btn">搜索</botton> </body>交集選擇器一般是在元素樣式需要提權的時候使用。
兄弟選擇器
????????兄弟選擇器用 “elementName+elementName” 來定義，用于選擇指定元素之后緊跟著的元素。
<style>/*只會選擇兄弟元素中的第一個p元素,如果緊跟在后面的第一個兄弟元素不是p則無效*/h2+p{background-color:yellow;} </style> <body><h2>DIV 內部標題</h2><p>h2 之后的第一個 P 元素。</p><p>h2 之后的第二個 P 元素。</p> </body>選擇器的權重問題
????????選擇器的權重的值可以表示為四個獨立的部分 a,b,c,d 組成。進行復合選擇器的權重計算時四個部分是獨立的，不會出現進位。在比較大小時按從 a-b-c-d 的順序依次進行比較，高位相同才需要比較低位。
| ！important | 無窮大 | 0 |
| style 屬性 | 1,0,0,0 | 1 |
| id 選擇器 | 0,1,0,0 | 2 |
| 類、偽類、結構偽類、屬性選擇器 | 0,0,1,0 | 3 |
| 標簽、偽元素選擇器 | 0,0,0,1 | 4 |
| 通配符選擇器 | 0,0,0,0 | 5 |
| 繼承的樣式 | 沒有權重 | 6 |
權重計算
- 后代選擇器、子選擇器、兄弟選擇器、交集選擇器：所有的基礎選擇器的權重相加（忽略掉 “>” 和 “+” ），注意沒有進位。
- 并集選擇器：相當于多個選擇器一起設置樣式，權重分開計算即可。
- 含有偽類、偽元素、屬性選擇器的復合選擇器的權重計算時要注意。
- 偽類：a:hover、p:first-child 的權重是0,0,1,1 不是 0,0,1,0；a:nth-of-type(n):hover權重是 0,0,2,1;即要加上前面那個元素的權重。
- 屬性選擇器：p[class~=“hello”] 的權重是 0,0,1,1（也是要加上前面那個元素的權重）。
- !important 的用法: li:hover {color: blue !important; font-weight: normal;} 此時該元素的 color 屬性樣式將無視其他選擇器設置的 color 屬性樣式。
總結
以上是生活随笔為你收集整理的css中的选择器及其权重的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安装及配置Maven环境变量
- 下一篇： 【开源协议】BSD、Apache2、GP