css選擇符有哪些
- PHPz原創
- 2023-04-24 09:07:53999瀏覽
<p>CSS選擇符是指在CSS樣式表中，用來指定樣式應用的HTML元素的方式。選擇符非常重要，它決定透過CSS將樣式綁定到哪些HTML元素。 CSS的選擇符是CSS程式設計必學的一項基礎知識。正確的選擇符可以提高程式碼的可讀性、可維護性，同時也能讓開發者更快實現自己的樣式規則。在本文中，我們將介紹CSS選擇符的幾個基本類型。
元素選擇器
<p>元素選擇器是CSS最基本的選擇器類型之一，它可以根據HTML元素的標籤名稱來選擇元素。舉個例子，我們要為所有<p>元素定義字體顏色為紅色，我們可以使用以下程式碼：
p {
color: red;
}
<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>上一篇：css樣式表不可能實現什麼功能下一篇：css樣式表不可能實現什麼功能