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

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

什麼是 CSS 選擇器？

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

常用的 CSS 選擇器

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

• 元素選擇器: 定位所有特定類型的元素。例如，要設定所有 <div> 元素的樣式： <pre class="brush:php;toolbar:false">&lt;code&gt;div { border: 1px solid black; }&lt;/code&gt;</pre> <ul> <li> <strong>類別選擇器</strong>: 選擇具有特定類別的元素。如果我們有一個名為 "text-large" 的類別：</li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;.text-large { font-size: 20px; }&lt;/code&gt;</pre> <ul> <li> <strong>ID 選擇器</strong>: 定位具有特定 ID 的元素。對於 ID 為 "header" 的元素：</li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;#header { background-color: blue; }&lt;/code&gt;</pre> <ul> <li> <strong>屬性選擇器</strong>: 用於具有特定屬性值的元素。例如，要設定所有外部連結（使用 "rel" 屬性）的樣式：</li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;a[rel=&quot;external&quot;] { color: red; }&lt;/code&gt;</pre> <h2 id="不常用但有用的-CSS-選擇器">不常用但有用的 CSS 選擇器</h2> <h3 id="子選擇器-gt">子選擇器 (>)</h3> <p>它定位元素的直接子元素。對於具有類別 "container" 的父元素：</p> <pre class="brush:php;toolbar:false">&lt;code&gt;.container &gt; p { margin-left: 10px; }&lt;/code&gt;</pre> <h3 id="後代選擇器">後代選擇器 ( )</h3> <p>這將選擇元素內的所有後代。如果我們有一個 ID 為 "main" 的 div，並且想要設定其內部所有 <code><span></span> 元素的樣式：

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

  鄰近兄弟選擇器 ( )

  選擇緊接在另一個特定元素之後的元素。例如，在 <h3></h3> 元素之後，如果有一個 <p></p> 元素：

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

  通用兄弟選擇器 (~)

  定位另一個元素的兄弟元素，不一定相鄰。如果我們有一個類別為 "item" 的 div，並且想要設定所有後續具有類別 "detail" 的兄弟元素的樣式：

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

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

  • 以…開頭(^=): 設定所有以"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>

  否定偽類 (:not())

  它選擇不符合某個選擇器的元素。例如，除具有類別 "hidden" 的元素之外的所有元素：

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

  目標偽類 (:target)

  當 URL 片段與元素的 ID 相符時。對於 URL 中 ID 為 "contact" 的部分：

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

  語言偽類 (:lang())

  依語言屬性定位元素。對於具有 lang="en-US" 的元素：

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

  has 偽類 (:has())

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

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

  選擇偽類 (::selection)

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

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

  結論

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

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