CSS選擇器是一種用于選擇HTML或XML文檔中特定元素的模式。允許你根據元素的標簽名、類名、ID、屬性等來選擇元素，并將樣式應用于這些選中的元素

基本選擇器

通配配選擇器

• 通配選擇器:可以選中所有的HTML元素

• 通配選擇器使用 符號 *,命中頁面所有的元素

• 語法

  • * {
      屬性名:屬性值;
    }
    

• 通配選擇器在實際設置樣式應用較少，在對應場景清除樣式使用較多

元素選擇器

• 元素選擇器:使用標簽選中所有的對應標簽統一設置樣式

• 語法

  • 標簽名: {
       屬性名:屬性值;
    }
    
    /* 示例  使用span標簽 選中頁面所有的span，設置字體大小為34px */
    span {
      font-size:34px;
    }
    

  • 元素選擇器無法實現差異化設置,所有的元素都是統一設置

類選擇器

• 類選擇器: 根據元素的class值，來選中某些元素

• 步驟

  1. 在標簽內設置class屬性
  2. 使用.class屬性值選中所有該屬性值的標簽

• 語法

  • <!-- html -->
    <!-- 給標簽設置同類名 歸屬于一類 -->
    	<p class="city">北京</p>
      <p class="city">山西</p>
      <p class="city">上海</p>
    <!-- 如果要給標簽設置多類，則多個值中間用空格隔開-->
      <span class="city name">天津</span>
    
    

  • /* css */
    
    /* 使用類選擇器的時候, 使用 .類名 的方式選中*/
    /* 給所有的city類 設置顏色為紅色 */
    .city {
      corlor:red;
    }
    /* 給所有的name類 設置字體大小*/
    .name {
      font-size:33px;
    }
    

元素的class值屬于不需要帶 符號. , 但是CSS的類選擇器要帶 符號. , class的值是我們自定義的，不能使用純數字、中文或者以及數字開頭,盡量使用英文和數字的組合，若多個單詞組成使用-做連接,例如left-menu

ID選擇器

• ID選擇器:根據標簽的ID屬性值，精準的選中某個元素

• 語法

  • <!-- 給該P標簽 設置一個ID值 -->
    <p id="on-city"> 北京 </p>
    

  • /* 使用符號#和ID值 來命中元素 */
    #on-city {
      font-size:33px;
    }
    

id 屬性值盡量由字母、數字、下劃線或者短杠組成，不能以數字開頭，最好以字母開頭，不能包含空格,區分大小寫

一個元素只能擁有一個ID屬性，多個元素的ID屬性值不能相同

一個元素可以同時擁有id和class屬性

復合選擇器

交集選擇器

• 選中同時符合多個條件的元素,且的關系

• 語法 選擇器1選擇器2選擇器3...{}

• 示例

  •   <h3 class="city">北京市</h3>
      <h3 class="city">天津市</h3>
      <p class="city on" id='home'>東城區</p>
      <p class="city">濱河區</p>
    

  • /* 所有的city設置為紅色*/
        .city {
          color: red;
        }
    /* 所有p標簽里面且為city類的標簽設置為綠色*/
        p.city {
          color: green;
          ;
        }
    
    /* P標簽里面歸屬為city類 并且ID為home的標簽設置為藍色 */
    p.city#home {
      color:blue;
    }
    /* 即是city類 又是on類的屬性 設置為黃色*/
    .city.on {
      color:yellow;
    }
    

• 注意事項

  1. 有標簽名情況下，表前面必須寫在前面

  2. id選擇器可以作為交集的條件，但是實際應用中幾乎不用，因為id本身就是唯一選擇，可以直接命中元素

  3. 交集選擇器不能出現兩個元素選擇器，因為一個元素不可能即是p又是span

  4. 用的最多的交集選擇器是元素選擇器配合類名選擇器,例如 p.city

并集選擇器

• 并集選擇器選中多個選擇器對應的元素，或者的關系，又稱分組選擇器

• 語法選擇器1,選擇器2,...{},多個選擇器通過,連接

• 示例：

  • /* city類、id值為home、name類 的背景顏色設置為粉色 */
    .city,
    #home,
    .name {
      background-color: pink;
    }
    

• 注意事項：

  1. 并集選擇器多個選擇器可以橫在一行，也可以豎著寫，一般豎著寫，語法清晰
  2. 任何形式的選擇器，都可以作為并集選擇器的一部分
  3. 并集選擇器通常用于集體聲明,可以縮小樣式表體積

關系選擇器

HTML的元素關系

父元素

• 直接包裹某個元素的元素，就是該元素的父元素

• <div>
  
    <h1 頁面標題 </h1>
    <ul>
      <li>導航</li>
      li>導航</li>
    </ul>
  
  </div>
  
  <!-- 
  上述標簽,div包裹著h1和ul，那么div就是ul和h1的父元素
  ul包裹著li，ul就是li的子元素
  
  -->
  

子元素

• 被父元素直接包含的元素
• 上述代碼,h1和ul就是div的子元素,li就是ul的子元素

祖先元素

• 父元素的父元素.....,一直往外層找,都是祖先元素
• 代碼中,div就是li的祖先元素,如果外面還有其他標簽，也是祖先元素
• 父元素也算是祖先元素的一種

后代元素

• 子元素的子元素......,一直往里找，都是后代元素
• 子元素也是后代元素的一種

兄弟元素

• 具有相同父元素的元素，互為兄弟元素
• 代碼中h1和ul就互為兄弟元素

后代選擇器

• 選中指定元素中，符合要求的所有后代元素

• 語法：`選擇器1 選擇器2 .. {} ，多個選擇器用空格隔開，先寫祖先，再寫后代

• 示例：

  • <!-- html -->
    
      <div class="city">
        <ul>
          <li class="beijing">北京</li>
          <li>上海</li>
          <li><a href="#">地圖</a></li>
        </ul>
    
      </div>
    
    

  • /* css */  
        
    /* 選中div中的ul中的所有li */
     div ul li {
       color: #000;
     }
        
     /* 選中div中的所有a，跳過ul和li，a也是div的后代元素 */
     div  a {
       color: #000;
     }
     /* 選中類名city中的所有li元素 */
     .city li {
       color: #000;
     }
     /* 選中類名city中的 所有類名為beijing里的所有li */
     .city .beijing li{
       color: #000;
     }
        
    

  • 注意事項:

    1. 后代選擇器最終選擇的都是后代，不選中祖先

    2. 一層、多層嵌套的后代，都是后代

    3. 使用后代選擇器時，不需要從代碼最外層的結構開始，只要符合關系要求即可

子代選擇器

• 選中指定元素中,符合要求的子元素，先寫父，再寫子

• 子代選擇器又稱子元素選擇器、子選擇器

• 語法:選擇器1>選擇器2>...{} 多個選擇器用>隔開

• 示例

  • <div>
      <a href="#">張三</a>
      <a href="#">李四</a>
      <a href="#">王五</a>
      <p>
        <a href="#">趙六</a>
        <div class="last">
          <a href="#">愛麗絲</a>
        </div>
      </p>
    </div>
    
    

  • /* 選中div的子元素中的a標簽 ，其中p標簽中的a標簽不會選中，因為和div的關系屬于后代元素*/
       div>a {
         color: #000;
       }
     
       /* 選中p標簽中的a標簽 */
       p>a{
         color: blue;
       }
     
       /* 選中div的子元素中的p標簽的子元素a標簽 */
       div>p>a{
         color: #000;
       }
       /* last類中的子元素中a標簽 */
       .last>a{
         color: #000;
       }
    

  • 注意事項:

    • 子代選擇器最終選擇的是子代，不是其中的父級

兄弟選擇器

相鄰兄弟選擇器

• 選中指定元素后,符合條件的相鄰兄弟元素

• 相鄰的概念是緊挨著他的下一個，僅一個，不會向上相鄰，如果中間有間隔其他元素，也不會選擇

• 語法: 選擇器1+選擇器2

• 示例:

  • <body>
    
      <div>title</div>
       <a href="#">阿里巴巴</a>
       <a href="#">字節跳動</a>
       <p>京東</p>
    
    </body>
    

  • /* 選中div下面的第一個a標簽，阿里巴巴 */
    div+a{
     color: #000;
    }
    /* 選中除了第一個li外的所有li,因為第二個li是第一個的相鄰兄弟,第三個是第二個的項鏈兄弟 */
    li+li{
     color: #000;
    }
    

通用兄弟選擇器

• 選中指定元素后,符合條件的所有兄弟元素,不會選中向上的元素，如果元素中間間隔了其他元素，則不會選中

• 語法:選擇器1~選擇器2{}

• 示例

  • /* div后的兩個a標簽都選中，不包含div */
      div~a {
        color: #000;
      }
    

屬性選擇器

• 選中屬性值符合要求的元素

• 語法，一共有五種:

  1. [屬性名]，選中具體某個屬性的元素
  2. [屬性名="屬性值"]，選中包含某個屬性，且屬性值等于指定值的元素
  3. [屬性值^="值"]，選中包含某個屬性，且屬性值以指定的值開頭的元素
  4. [屬性值$="值"]，選中包含某個屬性，且屬性值以指定的值結尾的元素
  5. [屬性值*="值"]，選中包含某個屬性，且屬性值包含指定的值的元素

• 示例

  • <div title="beijing">北京</div>
    <div title="shanghai">上海</div>
    

  • /* 選中具有title屬性的所有元素，前兩個div，不管屬性的值是什么，只要有該屬性就選中 */
      [title]{
        color: #000;
      }
    
      /* 選中屬性為title，并且屬性值會shanghai的元素，即第二個div */
      [title="shanghai"] {
        color: #000;
      }
    
      /* 選中有title屬性，且title屬性值是以字母b開頭的元素 */
      [title^='b'] {
        color: #000;
      }
    
       /* 選中有title屬性，且title屬性值是以字母i結尾的元素 */
      [title$='b'] {
        color: #000;
      }
    
      /* 選中有title屬性，且屬性值包含字母b的元素 */
      [title*='b'] {
            color: #000;
          }
    

偽類選擇器

偽類選擇器概念

• 什么是偽類

  • 很像類，但不是類，是元素特殊狀態、位置或者條特定條件，一種用于選擇元素的特殊選擇器。允許根據元素的狀態、位置或其他特定條件來選擇元素，并為其應用樣式

  • 偽類選擇器以冒號:開頭，緊跟著偽類的名稱。它們可以與元素選擇器、類選擇器、ID選擇器等其他選擇器結合使用，以更精確地選擇元素

• 概念示例

  • 假設有兩個超鏈接，點擊過的超鏈接需要變成紅色，沒有點擊過的超鏈接變成藍色，對于這兩種狀態進行樣式設置

動態偽類

動態偽類選擇器根據元素的狀態或用戶的交互來選擇元素

1. a:link:超鏈接未被訪問的狀態，只有超鏈接可以使用

2. a:visited:超鏈接訪問過的狀態，只有超鏈接可以使用

3. 元素:hover：鼠標懸停在元素上的狀態，所有元素都可以使用

4. 元素:active:元素激活(鼠標點擊下未松開)的狀態，所有元素都可以使用

5. 元素:focus:獲取焦點的元素，點擊、快捷鍵、觸摸等方式選擇元素時，就是獲取焦點，只有表單類元素才能使用

6. 注意事項:

   • 前四個選擇器同時使用的時候注意編寫優先級,從上到下依次是link、visited、hover、active
   • 因為同一個操作可能會有多個行為狀態,順序不對會出現覆蓋樣式的情況

7. 使用示例:

   • /* 選中沒有訪問過的a元素 */
     a:link {
       color: blue;
     }
     
     /* 選中訪問過的a元素 */
     a:visited {
       color: red
       ;
     }
     
     /* 選中鼠標懸浮狀態的a元素 */
     a:hover {
       color: yellow;
     }
     
     /* 選中激活狀態(鼠標點擊后沒有放開)的a元素 */
     a:active {
       color: peru;
     }
     
     /* 選中獲取焦點的input元素 */
     input:focus {
       background-color:burlywood;
     }
     

結構偽類

結構偽類選擇器根據元素在文檔結構中的位置來選擇元素,和其他選擇器配合使用

1. :first-child:所有子元素中的第一個

2. :last-child:所有子元素中的最后一個

3. :nth-child(n):所有子元素的第n個

4. :first-of-type:所有同類型子元素的第一個

5. :last-of-type:所有同類型子元素的最后一個

6. :nth-of-type(n):所有同類型子元素的第n個

7. :nth-last-child(n)：所有子元素的倒數第n個，與序號3是反序

8. :nth-last-of-type(n):所有同類型子元素的倒數第n個，與序號6是反序

9. :only-child:選擇沒有兄弟的元素，即該父類只有他一個子元素

10. :only-of-type:選擇沒有同類型兄弟元素的元素

11. :root:選中頁面根元素

12. :empty:選中內容為空的元素(空格也算內容)

13. 常用(前6)結構偽類使用示例:

    • 作用域是全部子元素

      • /* 選中div的子元素中的P元素的第一個,如果div的第一個子元素不是P，則無法選中，作用域是div的直系所有子元素，不管是不是P標簽 */
        div>p:first-child {
          color: #000;
        }
        
        
        /* 選中div的后代p元素，p的父元素是誰無所謂，但是p必須是其父元素的第一個子元素 */
        div p:first-child {
          color: #000;
        }
        
        /* 父元素的第一個子元素，且為P元素，就被選中 如果第一個元素不是p則不會有選中*/
        p:first-child {
          color: antiquewhite;
        }
        
        
        /* 選中的是div所有的子元素的最后一個,且必須最后一個子元素是P */
        div>p:last-child {
          color: aqua;
        }
        
        
        /* 選中的是div所有子元素的第一個且為P元素，1是下標，下標從1開始而不是0，如果第一個元素是是a,那么1則選不中，用2可以選中 */
        div>p:nth-child(1) {
          color: yellowgreen;
        }
        
        /* 也可以寫表達式，表達式格式用n計數，n是正無窮整數,從0開始，比如2n (0*2=0,1*2=2,2*2=4),選中偶數，2n+1選中奇數(2*0+1=1,2*1+1=3),用內置表示 even是選中偶數,odd選中奇數,選中前五的話就是-n+5 （-0+5=5，—1+5=4類推），表達式根據場景編寫，要注意格式必須為某n + 值，或者某n，不能值+某n
        如果對應的元素不是對應的子類標簽，則不會選中，根據規則把符合要求且為對應元素的標簽選中
        
        */
        
        div>p:nth-child(2n) {
          color: yellowgreen;
        }
        

    • 作用域是同類型子元素

      • /* 選中div的P標簽子元素中第一個，作用域是所有同類型子元素，而不是所有子元素，如果子類依次是a、span、p、p，則選中第一個p */
        div>p:first-of-type {
          color: aqua;
        }
        /* 選中div同類型子元素的最后一個，即所有P標簽的最后一個P標簽，作用域是所有同類型子元素，而不是所有子元素 */
        div>p:last-of-type {
          color: aqua;
        }
        
        /* 選中div同類型子元素的第三個，即第三個P標簽，作用域是所有同類型子元素，而不是所有子元素 表達式邏輯與nth-child一致 */
        div>p:nth-of-type(3) {
          color: #000;
        }
        

否定偽類

用于選擇不符合指定條件的元素,以:not()的形式表示，后面跟著一個選擇器參數，用于指定不希望選擇的元素

/*  選中div的子元素中的p元素，但是排除類名是fail的 */
div>p:not(.fail)
 {
  color: rebeccapurple;
 }

 /* 選中div的子元素的p元素，但是排除title屬性值是beijing的 */

 div>p:not([title="beijing"]) {
  color: #000;
 }

/* 選中div的子元素的p元素，排除第一個p元素 */
div>p:not(:first-child){
  color: #000;
}

 /* 否則偽類可以使用任意選擇器進行排除，語法正確即可 */

UI偽類

UI狀態偽類選擇器，用于選擇處于某種狀態下的UI元素，主要用于HTML表單上，根據表單元素的不同狀態，定義不同的樣式，來增強用戶體驗

UI狀態偽類選擇器的特征：指定的樣式只有在某種狀態下才起作用

表單元素的狀態包括獲得焦點、失去焦點、選中、未選中、可用、不可用、有效、無效、必填、選填、只讀等等

• 常用的UI偽類

  • :checked:被選中的復選框或者單選按鈕

  • :enable:可用的表單元素，沒有設置disabled禁用屬性

  • :disabled:不可用的表單元素,設置了disabled禁用屬性

• 比較詳細的UI偽類文章

<input type="checkbox">
<input type="radio">

 /* 單選或者復選框被選中的時候 */
 input:checked {
  width: 100px;
  height: 30px;
 }

 /* 選中被禁用的Input元素 */
input:disabled{
  background-color: gray;
}

目標偽類

• :target:選中錨點所指向的元素

    <!-- 設置跳轉錨點 -->
    <a href="#first">第一個</a>
    <a href="#last">第二個</a>

    <div id="first">first</div>
    <div id="last">last</div>

/* 當使用錨點跳轉對對應元素的時候，將顏色設置為紅色 */
  div:target{
    color:red;
  }

語言偽類

:lang(),根據指定的語言選擇元素，如果元素沒有單獨設置lang,默認是hmlt標簽的默認值<html lang="zh">

      <!--設置語言為英文  -->
    <div lang="en">BeiJing</div>
    <div lang="en">北京</div>

/* 選中div并且lang屬性設置的是en */
div:lang(en){
  color: red;
}

/* 選中所有設置lang屬性是en的元素 ，如果html默認語言設置為en，則選中沒有單獨設置lang的所有元素*/
:lang(en){
  color: red;
}

偽元素選擇器

偽元素:很像元素，但是不是元素，是元素的一些特殊位置

常用偽元素:

• ::first-letter:選中元素中的第一個文字
• ::first-line：選中元素中第一行文字
• ::selection：選中被鼠標選中的內容
• ::placholder：選中輸入框的提示文字
• ::before：在元素最開始的位置,創建一個子元素，用content指定內容，也可以設置其他樣式
• ::after：在元素最好的位置，創建一個子元素，用content指定內容，也可以設置其他樣式

<div>Lorem, ipsum dolor.</div>

<input type="text" placeholder="默認值">
<p>999</p>
<p>888</p>

/* 選中的是div中的第一個文字 */
div::first-letter {
  color: red;
  font-size: 30px;
}

/* 選中的div中的第一行 */
div::first-line {
  color: yellow;
}  
/* 選中div中被鼠輩選擇的文字 */
div::selection {
  background-color: gold;
}
/* 選中input中的提示文字  */
input::placeholder {
  color: #000;
}

/* 在p標簽的內容之前 創建一個子元素，*/
p::before {
  content: "$";
}

/* 在p標簽的內容之后 創建一個子元素 */
p::after {
  cursor: ".00";
  color: yellow;
}

選擇器優先級

簡單選擇器從高到低優先級:

• !important，在屬性值后面設置，標明該樣式優先級為最高

  • .slogan {
      color: pink !important;
    }
    /* 給哪個樣式加 !important 只是代表該樣式優先級最高，而不是選擇器優先級最高 */
    

• 行內樣式

• ID選擇器

• 類選擇器

• 元素選擇器

• 通配選擇器

• 繼承的樣式

復雜組合選擇器通過計算權重決定優先級：

• 計算條件格式(a,b,c)依次對應下面1、2、3
  1. ID選擇器的個數
  2. 類、偽類、屬性選擇器的個數
  3. 元素、偽元素選擇器的個數
• 權重比較規則:
  • 比如兩個選擇器權重格式為 (1,0,0) 和 (0,2,2)
  • 從左向右依次比較，當前位勝出之后，不會比較后面，則(1,0,0) > (0,2,2)
  • 注意點:并集選擇器中每一個部分是分開計算的

如果兩個CSS選擇器的權重一樣，那么后面出現的選擇器將具有更高的優先級。這意味著后面的選擇器將覆蓋先前的選擇器的樣式

CSS三大特性

層疊性

如果發生了樣式沖突，那么就會根據一定的規則(選擇器優先級)，進行樣式的層疊(覆蓋)

繼承性

• 元素會自動擁有其父元素、或者祖先元素上設置的某些樣式

• 繼承規則是優先繼承距離近的樣式

  • 常見的可繼承樣式有color、font-xxx、line-xxx等等，比如div設置了顏色為紅色，其中有個p標簽，默認顏色也會是紅色

• 可以參考mdn網站，查看Properties中的具體屬性可繼承描述是否為可繼承屬性

優先級

• 選擇器的優先級，用來確定在多個選擇器應用于同一個元素時，哪個選擇器的樣式將被應用的規則。CSS的優先級是根據選擇器的特定性和來源來計算

總結

以上是生活随笔為你收集整理的CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。