<p>CSS選擇符是指在CSS樣式表中,用來指定樣式應用的HTML元素的方式。選擇符非常重要,它決定透過CSS將樣式綁定到哪些HTML元素。 CSS的選擇符是CSS程式設計必學的一項基礎知識。正確的選擇符可以提高程式碼的可讀性、可維護性,同時也能讓開發者更快實現自己的樣式規則。在本文中,我們將介紹CSS選擇符的幾個基本類型。
元素選擇器
<p>元素選擇器是CSS最基本的選擇器類型之一,它可以根據HTML元素的標籤名稱來選擇元素。舉個例子,我們要為所有
<p>
元素定義字體顏色為紅色,我們可以使用以下程式碼:
<p>這樣,所有的段落文字都會變成紅色。
類別選擇器
<p>類別選擇器是根據元素指定的class屬性選擇元素的識別碼。在HTML中,我們可以為元素指定一個或多個class,每個class都以空格分隔。我們可以使用類別選擇器設定CSS屬性為特定的class。
<p class="highlight">This text will be highlighted in some way.</p>
登入後複製
.highlight {
background-color: yellow;
}
登入後複製
<p>在這個例子中,我們將所有class為「highlight」的元素的背景色設定為黃色。
ID選擇器
<p>與類別選擇器類似,ID選擇器是根據元素指定的ID屬性選擇元素的識別碼。 ID唯一標識一個元素,所以每個HTML文件中每個ID值是唯一的。我們可以使用這個ID選擇器將CSS屬性綁定到特定的元素中。
<p id="main-heading">This is the main heading of the page.</p>
登入後複製
#main-heading {
font-size: 24px;
}
登入後複製
<p>在這個例子中,我們使用ID選擇器將所有ID為「main-heading」的元素的字體大小設定為24px。
屬性選擇器
<p>屬性選擇器是根據元素指定的屬性來選擇元素的識別碼。我們可以使用屬性選擇器為所有擁有特定屬性的元素設定CSS屬性。屬性選擇器也可以進一步判斷屬性是否符合某個特定值.
<input type="text" value="Input text here">
<input type="submit" value="Submit">
登入後複製
input[type="text"] {
width: 200px;
}
input[type="submit"] {
background-color: blue;
color: white;
}
登入後複製
<p>在這個例子中,我們使用屬性選擇器,將所有
<input>
元素中
type
屬性為
text
的元素的寬度設定為200px,將
type
屬性為
submit
的元素的背景色設為藍色,字型顏色設定為白色。
偽類選擇器
<p>偽類選擇器是選擇元素的特定狀態或點的選擇器,這些狀態或點可能無法透過標準的HTML屬性或元素類型來選擇。在CSS中,我們使用冒號(:)來定義偽類選擇器。
<p>以下是幾個常用的偽類別選擇器:
-
:hover
:滑鼠滑過元素時的狀態
-
#:active
:滑鼠點擊元素時的狀態
- ##:visited
:連結已被存取的狀態
- :focus
:元素取得滑鼠焦點時的狀態
- :nth-child()
:選擇一個元素的兄弟元素
- :last-child
:選擇一個兄弟元素中的最後一個元素
button:hover {
background-color: red;
}
input:focus {
outline: none;
}
ul li:nth-child(2) {
color: blue;
}
div:last-child {
font-size: 16px;
}
登入後複製
在這個例子中,我們為滑鼠滑過<p>