你可能不知道的有用 CSS 選擇器

<p>

<p>CSS 選擇器在網頁開發中起著至關重要的作用，用於網頁樣式設計。雖然許多人熟悉常用的選擇器，但還有一些不那麼常見但非常有用的選擇器。

什麼是 CSS 選擇器？

<p>CSS 選擇器是用來選擇網頁上元素以進行樣式設計的模式。它們可以根據屬性、類別、ID 等來定位元素。

常用的 CSS 選擇器

<p>以下是一些常用的選擇器：

• 元素選擇器: 定位所有特定類型的元素。例如，要設定所有 <div> 元素的樣式：

<code>div {
  border: 1px solid black;
}</code>

• 類別選擇器: 選擇具有特定類別的元素。如果我們有一個名為 "text-large" 的類別：

<code>.text-large {
  font-size: 20px;
}</code>

• ID 選擇器: 定位具有特定 ID 的元素。對於 ID 為 "header" 的元素：

<code>#header {
  background-color: blue;
}</code>

• 屬性選擇器: 用於具有特定屬性值的元素。例如，要設定所有外部連結（使用 "rel" 屬性）的樣式：

<code>a[rel="external"] {
  color: red;
}</code>

不常用但有用的 CSS 選擇器

<h3>子選擇器 (>) <p>它定位元素的直接子元素。對於具有類別 "container" 的父元素：

<code>.container > p {
  margin-left: 10px;
}</code>

<h3>後代選擇器 ( ) <p>這將選擇元素內的所有後代。如果我們有一個 ID 為 "main" 的 div，並且想要設定其內部所有 <span> 元素的樣式：

<code>#main span {
  color: green;
}</code>

<h3>鄰近兄弟選擇器 ( ) <p>選擇緊接在另一個特定元素之後的元素。例如，在 <h3> 元素之後，如果有一個 <p> 元素：

<code>h3 + p {
  font-weight: bold;
}</code>

<h3>通用兄弟選擇器 (~) <p>定位另一個元素的兄弟元素，不一定相鄰。如果我們有一個類別為 "item" 的 div，並且想要設定所有後續具有類別 "detail" 的兄弟元素的樣式：

<code>.item ~ .detail {
  padding-top: 5px;
}</code>

<h3>屬性選擇器與部分匹配 (^=, $=, *=)

• 以…開頭(^=): 設定所有以"https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"

<code>img[src^="https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"] {
  border-radius: 5px;
}</code>

• 以…結尾 ($=): 所有方法以 "post" 結尾的表單：

<code>form[method$="post"] {
  background-color: #f0f0f0;
}</code>

• *包含 (=)**: 設定所有 href 屬性中包含 "product" 的連結的樣式：

<code>a[href*="product"] {
  text-decoration: underline;
}</code>

<h3>否定偽類 (:not()) <p>它選擇不符合某個選擇器的元素。例如，除具有類別 "hidden" 的元素之外的所有元素：

<code>:not(.hidden) {
  display: block;
}</code>

<h3>目標偽類 (:target) <p>當 URL 片段與元素的 ID 相符時。對於 URL 中 ID 為 "contact" 的部分：

<code>div {
  border: 1px solid black;
}</code>

<h3>語言偽類 (:lang()) <p>依語言屬性定位元素。對於具有 lang="en-US" 的元素：

<code>.text-large {
  font-size: 20px;
}</code>

<h3>has 偽類 (:has()) <p>:has() 偽類用於選擇包含特定子元素或後代元素的元素。例如，要設定包含圖像的 div 的樣式：

<code>#header {
  background-color: blue;
}</code>

<h3>選擇偽類 (::selection) <p>此偽類可讓您設定使用者所選文字部分的樣式。例如，當使用者選擇段落中的某些文字：

<code>a[rel="external"] {
  color: red;
}</code>

結論

<p>這些不常用的 CSS 選擇器提供了額外的方法來精確地定位和設定元素的樣式。它們可以增強 CSS 程式碼的靈活性和功能性，使其在創建視覺上吸引人且結構良好的網頁方面更強大、更有效率。

<p>更多資訊請上 https://www.php.cn/link/8dacd3d8b9d2cd20eb244b5f745ea88e

以上是你可能不知道的有用 CSS 選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！