css選擇符有哪些

PHPz
發布: 2023-04-24 09:27:13
原創
1005 人瀏覽過
<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>
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板