使用 CSS 選擇器實現對不含 title 屬性元素的選擇

飞仔FeiZai發表於2024-07-16
CSS

使用 CSS 選擇器實現對不含 title 屬性元素的選擇

在 CSS 中，選擇器用於指定樣式規則應用於哪些元素。雖然 CSS 沒有直接排除某些屬性的功能，但是可以透過使用偽類選擇器和屬性選擇器來實現排除含有特定屬性的元素的效果。

要排除含有 title 屬性的元素，可以使用 :not 偽類選擇器。以下是一個示例，展示如何使用 :not 偽類選擇器來排除含有 title 屬性的元素：

/* 選擇所有不含有 title 屬性的元素 */
*:not([title]) {
  /* 樣式規則 */
  color: red;
}

示例解釋

  • * 選擇所有元素。
  • :not([title]) 選擇不含有 title 屬性的元素。
  • { color: red; } 是應用於這些元素的樣式規則，可以根據需求進行調整。

具體示例

假設有以下 HTML 結構：

<div>Element 1</div>
<div title="example">Element 2</div>
<p>Element 3</p>
<p title="example">Element 4</p>

應用上述 CSS 規則後，所有不含 title 屬性的元素將變成紅色：

*:not([title]) {
  color: red;
}

結果是：

  • "Element 1" 和 "Element 3" 的文字顏色變成紅色。
  • "Element 2" 和 "Element 4" 不受影響，因為它們含有 title 屬性。

這種方法可以實現排除含有特定屬性的元素，並對其他元素應用樣式規則。

相關文章