CSS有哪些選擇器

CSS是一種用於網頁設計的樣式表語言，可以透過它來控制網頁的外觀和佈局。而選擇器是CSS中最重要的一部分之一，它可以幫助我們找到想要更改樣式的HTML元素。本文將詳細介紹CSS中常用的選擇器類型。

一、基礎選擇器

<li>標籤選擇器：透過HTML標記名稱選擇元素。

例如：

p {
  color: red;
}

上面的程式碼會將HTML文件中的所有<p></p>元素的文字顏色改為紅色。

<li>類別選擇器：透過class屬性選擇一個或多個元素。

例如：

.blue {
  color: blue;
}

上面的程式碼會將所有擁有class屬性為"blue"的元素的文字顏色改為藍色。

<li>ID選擇器：透過id屬性選擇一個唯一的元素。

例如：

#header {
  width: 100%;
}

上面的程式碼會將擁有id屬性為"header"的元素的寬度調整為100%。

二、組合選擇器

<li>後代選擇器：選擇後代元素。

例如：

header nav {
  background-color: blue;
}

上面的程式碼會將<header></header>元素下的所有<nav></nav>元素的背景顏色改為藍色。

<li>子元素選擇器：選擇子元素。

例如：

ul > li {
  font-size: 16px;
}

上面的程式碼會將所有的<ul></ul>元素中的直接子元素<li>的字體大小設定為16像素。

三、屬性選擇器

<li>屬性選擇器：透過屬性名稱來選擇元素。

例如：

a[href="https://www.example.com"] {
  color: green;
}

上面的程式碼會將所有連結到https://www.example.com的錨點元素顏色設定為綠色。

<li>存在選擇器：選擇所有包含該屬性的元素。

例如：

input[type="text"] {
  background-color: #f2f2f2;
}

上面的程式碼會將所有擁有type屬性為"text"的<input>元素的背景顏色設定為灰白色。

四、偽類選擇器

<li>連結偽類：透過元素是否為連結來選擇元素。

例如：

a:hover {
  color: red;
}

上面的程式碼會將所有在滑鼠懸停時的連結的顏色設為紅色。

<li>焦點偽類：透過使用者是否已將某個元素設定為焦點來選擇元素。

例如：

input:focus {
  border: 2px solid green;
}

上面的程式碼會在使用者將某個<input>元素設為焦點時，將該元素的邊框顏色設定為綠色。

五、偽元素選擇器

<li>::before 和 ::after：在被選擇元素的內容的前面或後面插入產生的內容。

例如：

h1::before {
  content: ">> ";
}

上面的程式碼會在所有<h1></h1>元素的前面插入一個帶有兩個大於號碼的內容。

<li>::first-letter 和 ::first-line：選擇元素的第一個字母或第一行文字。

例如：

p::first-letter {
  font-size: 20px;
}

上面的程式碼會將每個<p></p>元素的第一個字母的字體大小設為20像素。

總結：

以上就是CSS中常用的選擇器類型，透過它們可以讓網頁更能展現各種不同樣式。在實際的網頁設計中，我們可以根據實際情況選擇不同的選擇器來使用，以達到更好的效果。

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