二、選擇器權重
!important
前面我們已經掌握了常用css選擇器和css的一些常用屬性，現在我們進一步擴充套件css選擇器的內容包括內容如下：
層級選擇器
找到指定html元素內的某個元素
.sport li組合選擇器可以將多個選擇器用逗號分隔開，進而定義將多個選擇器選擇的元素定義為相同的樣式，例如下面的示例，可以將class屬性為info1和info2的所有元素定義字型顏色為紅色。
.info1,.info2此前我們學習的所有選擇器都是靜態的定義某些元素的樣式，通過偽類選擇器，我們還可以為元素新增一定的行為，這裡講解最常用的偽類選擇器:hover，當滑鼠懸浮在某個元素上時，為其設定樣式，示例**如下所示：
.box:hover偽元素選擇器可以使用css為網頁新增額外的元素。
示例**如下所示
h1::before
h1::after
在css3版本之前，偽類選擇器和偽元素選擇器都是乙個冒號，css3的語法中，為了讓偽類選擇器和偽元素選擇器有所區分，在偽元素選擇器前又增加了乙個冒號，程式設計了兩個冒號。當時css3是完全相容此前的css版本的，所以大家在開發的過程中，可能會遇到只有乙個冒號的偽元素選擇器，雖然可以正常使用，但是這是過時的語法，大家在開發的過程中盡量使用css3的新語法，使用兩個冒號。
雖然css還有很多很多選擇器我並沒有講解，但是目前學習的選擇器基本可以應付95%以上的開發工作了，在學習的過程中，建議大家先熟悉這些選擇器並靈活運用，日後的工作中如果遇到需要其他選擇器才能應付的需求，到時直接看文件查閱其他選擇器，基本可以分分鐘搞定所遇到的問題。
class選擇器與id選擇器權重對比
到目前為止我們已經可以熟練掌握css選擇器了，但是考慮乙個問題，如果兩個不同的選擇器都找到了同乙個元素，並且設定不同的樣式，那麼這個元素的樣式應該被哪個選擇器所指定呢，這就涉及到了選擇器權重的問題，示例**如下所示。
#content
.box
.box1
.box2
選擇器權重計算方法
在css中，id選擇器的權重是100，class選擇器的權重是10，元素選擇器的權重是1，數值越大，權重越大，如果是放在層級選擇器中，可以把層級選擇器拆分成多個選擇器權重的值，然後相加計算總權重值，例如下面的選擇器
#container .box ul li
.container .box li
其他引入css的方法
此前我們編寫的css樣式都寫在head標籤的style標籤內，此方法我們稱作【嵌入樣式】，除了嵌入樣式外，還有兩種方法來設定css樣式
內聯樣式
外部樣式
外部樣式例項**如下所示
/* index.css檔案 */
h1
嵌入樣式寫在html檔案中，隨著網頁內容的增加，會顯得html檔案過於臃腫，所以也不推薦使用這種方式。
從現在開始，我們編寫的所有樣式，都要使用外部樣式。
關於三種樣式的優先順序，內聯樣式優先順序最高，嵌入樣式和外部樣式如果權重相同，後面的樣式會覆蓋前面的樣式。
通過在樣式的結尾設定!important，可以將此樣式優先順序設定為最高，例項**如下所示：
CSS高階選擇器
css高階選擇器 例子 並集選擇器 p,h1 p和h1 標籤文字變紅色 交集選擇器 標籤選擇器 id 選擇器或者標籤選擇器 類選擇器 p.class1 類名為 class1 的p 標籤樣式中文字為黃色，當不同標籤使用相同類名時 後代選擇器 巢狀標籤 p span 注意兩者標籤中有空格的 this i...
css高階選擇器
css3高階選擇器 偽類選擇器 p first of type 匹配同型別中的第乙個同級兄弟元素p p last of type 匹配同型別中的最後乙個同級兄弟元素p p first child 匹配父元素的第乙個子元素p。p last child 匹配父元素的第乙個子元素p。p nth child...
css選擇器高階
1 屬性選擇器 屬性和值選擇器 2 相鄰兄弟選擇器 3 後代選擇器 包含選擇器 4 子元素選擇器 5 選擇器分組 1 屬性選擇器 屬性和值選擇器 1 為帶有 title 屬性的所有元素設定樣式 title 2 為 title haha 的所有元素設定樣式 title haha 3 為 title的屬...