CSS3中常用的選擇器有哪些

CSS3的選擇器有很多種，用來選擇和定位HTML元素。以下將介紹一些常用的CSS3選擇器，並提供對應的程式碼範例。

1. 元素選擇器（Element Selector）:
   元素選擇器是最基本、最常用的選擇器，用於選擇HTML文件中的元素。以下是使用元素選擇器的程式碼範例：

   p {
     color: red;
   }

   以上程式碼表示選擇所有的

   元素並將它們的文字顏色設為紅色。

2. 類別選擇器（Class Selector）:
   類別選擇器用於選擇具有相同類別名稱的元素。需要在HTML元素的class屬性中加上對應的類別名，並以點號"."開頭。以下是一個使用類別選擇器的程式碼範例：

   .highlight {
     background-color: yellow;
   }

   以上程式碼表示選擇所有具有類別名為"highlight"的元素，並將它們的背景顏色設為黃色。

3. ID選擇器（ID Selector）:
   ID選擇器用於選擇具有相同id的元素。需要在HTML元素的id屬性中加上對應的id，並以井號"#"開頭。以下是使用ID選擇器的程式碼範例：

   #logo {
     width: 200px;
     height: 100px;
   }

   以上程式碼表示選擇具有id為"logo"的元素，並設定它的寬度為200px、高度為100px。

4. 屬性選擇器（Attribute Selector）:
   屬性選擇器用於選擇具有特定屬性的元素。可根據屬性的存在、值等進行選擇。以下是一些常見的屬性選擇器的程式碼範例：

   • 選擇具有指定屬性的元素：

     input[type="text"] {
     border: 1px solid black;
     }

     以上程式碼表示選擇所有具有type屬性為"text"的元素，並將它們的邊框設為1px黑色實線。

   • 選擇具有指定屬性值開頭、結尾或包含某個字串的元素：

     a[href^="https"] {
     color: blue;
     }

     以上程式碼表示選擇所有具有href屬性值以"https"開頭的元素，並將它們的文字顏色設為藍色。

5. 偽類選擇器（Pseudo-class Selector）:
   偽類別選擇器用於選擇元素的特定狀態或位置。以下是一些常用的偽類別選擇器的程式碼範例：

   • 選擇第一個子元素：

     ul li:first-child {
     font-weight: bold;
     }

     以上程式碼表示選擇所有

     元素的第一個
     • 子元素，並將它們的字體加粗。

     • 選擇滑鼠懸停的元素：

       a:hover {
       text-decoration: underline;
       }

       以上程式碼表示選擇所有滑鼠懸停在元素上的情況，並在它們的文字下方添加下劃線。

以上是CSS3中一些常用的選擇器及程式碼範例。選擇合適的選擇器能夠輕鬆選擇並修改HTML元素的樣式，提高網頁設計的效果與彈性。

以上是CSS3中常用的選擇器有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！