(18)0907_CSS選擇器詳解

選擇器的優先級（決定那個樣式生效）：

important； > 內聯樣式 > id選擇器> 類和僞類 > 元素選擇器 > 通配選擇器> 繼承樣式無優先級

最大        >   1000     >    100    >     10       >        1        >        0        >      無  

 

（內聯樣式，也叫 行內樣式）

 

 

在 CSS 裏面定義自增函數 counter-increment

• #list li { background-color: red; counter-increment: num; // 定義自增函數 } // 至關於 // function counter(){ var num; num++; } #list li:nth-child(10n)::before { content: counter(num); // 調用自增函數 position: absolute; top: 30px; left: 0px;
  }

  
  

 

---

 id選擇器：

• #nav { background-color: yellow;
  }

 

類選擇器：

• .article { background-color: skyblue;
  }

 

屬性選擇器：

• // 含 title 屬性的元素
  p[title] { background-color: red; } // title="photos" 的元素 p[title = "photos"] { background-color: red; } // title 的屬性值以 "pho" 開頭的元素 p[title ^= "pho"] { background-color: red; } // title 的屬性值以 "s" 結尾的元素 p[title $= "s"] { background-color: red; } // title 的屬性值含有 "pho" 的元素 p[title *= "pho"] { background-color: red; } // title 的屬性值含有 "photos" 單詞的元素 p[title ~= "photos"] { background-color: red; }

 

僞類選擇器：

• // 最佳順序 
  :link { color: blue;
  } :visited { color: pink;
  } :hover { color: yellow;
  } :active { color: red;
  }

   

• :focus { background-color: #bfc;
  }

 

• 不使用 js 實現輪播圖

  • bottom:target { 
    /* 操做<a href="#bottom"> 超連接 點擊 a元素，跳轉到目標元素 */
    　　/* 給目標元素加樣式 */ 　　border: 1px solid red;
    }

 

• 文不能內容選中樣式

  • ::selection { color:yellow; background-color: black;
    }

 

子元素的僞類選擇器（CSS3 結構類）：

• 選中沒有任何子節點的元素

  • // <div id="test_box"></div> #test_box:empty { background-color: skyblue; }

     

• 根據索引

  • p:first-child { background-color: blue; } // 第一個子元素 p:last-child { background-color: blue; } // 最後一個子元素 p:only-child { background-color:red; } // 惟一子元素 // 第一個元素的索引爲 1 p:nth-child(1) { background-color: blue; } // 最後一個元素開始計算，索引爲 1 的元素 p:nth-last-child(1) { background-color: red; } // 實質上是從 0 開始計算，可是並無第 0 個子元素 // 之因此從 0 開始，是爲了 使用表達式選擇元素 p:nth-child(2n){ background-color: blue; } // 偶數索引的元素 p:nth-child(2n+1){ background-color: blue; } // 奇數索引的元素 p:nth-child(3n+1){ background-color: blue; } // 索引 1 4 7...的元素 // 偶數索引的元素 p:nth-child(even) { background-color: blue; } // 奇數索引的元素 p:nth-child(odd) { background-color: blue; }

     

• 根據類型

  • // 1. 先找到 修飾元素 的類型 此處爲 li // 2. 再找到全部此類型的同類同輩元素，根據表達式計算索引，選中元素 // 3. n 從 0 開始，從順數第一個特定類型的元素開始 // 順數，子元素爲 li 的 偶數索引的 子元素 li:nth-of-type(2n){ background-color: blue; } li:first-of-type(){ background-color: blue; } // 第一個 li li:last-of-type(){ background-color: blue; } // 最後一個 li li:only-of-type(){ background-color: blue; } // 惟一子元素 li // 1. 先找到 修飾元素 的類型 此處爲 li // 2. 再找到全部此類型的同類同輩元素，根據表達式計算索引，選中元素 // 3. n 從 0 開始，從倒數第一個特定類型的元素開始 // 倒數，子元素爲 li 的 奇數索引的 子元素 li:nth-last-of-type(2n+1){ background-color: blue; } 

 

元素的僞類選擇器（嚴格語法要求 ::） : 

• p::first-letter { background-color: red; } p::first-line { background-color: blue; } p::before { content: "段前的內容" /* 段前行內僞元素 至關於 <p><span>段前的內容</span> 哈哈哈哈哈哈</p> */ } p::after { content: "段後的內容" /* 段後行內僞元素 至關於 <p>哈哈哈哈哈哈<span>段後的內容</span></p> */ }
  // 僞元素 與 元素： 
   // 1. 沒法經過 js 獲取其 DOM對象
   // 2. 沒法經過瀏覽器直接查看僞元素
   // 3. 沒法被鼠標選中（unable to select）
   // 4. 僞元素的默認類型是 inline
  
  // 僞元素 與 僞類：
   // 1. 有兩個冒號的 :: 必定是僞元素
   // 2. 僞類修飾元素的狀態，而僞元素是一個特殊的元素（假行內元素，默認類型是 inline）
  
  // 使用僞元素注意事項：
   // 1. ::before 和 ::after 必須設置 content，不然不生效
   // 2. ::before 和 ::after 顯示背景圖，必須 display 設置爲塊元素
   // 3. ::before 和 ::after 設置爲 display: inline-block; 時，必須額外設置 vertcal-align: middle;

 

否認僞類選擇器：

• p:not(.white_boy) { background-color: blue; } ul :not(span){ background-color: red; }

 

元素選擇器：

• div {}

 

統配選擇器：

• * {} div > * {}

 

後代元素選擇器：

• div span{} 

 

子元素選擇器：

• div>span {}

 

緊接着的兄弟元素選擇器：

• span + p {}

 

後全部的兄弟元素選擇器：

• span ~ p {}