CSS 可以根據子元素選擇父元素嗎？

具有特定子元素的 CSS 選擇器

本問題探討了根據特定子元素的存在來選擇元素的可能性。

目前 CSS 限制：

截至目前 CSS 規格（CSS2 和CSS3)，沒有執行父級選擇的內建功能。這意味著如果一個元素包含特定的子元素，則無法直接選擇該元素。

過去的努力和建議：

CSS 規範的舊草案包括選擇器的概念主題，這將允許根據其子元素選擇父元素。但是，此功能已被刪除，並且在目前的 CSS 實作中不存在。

新興功能：

CSS 規範的最新草案，例如選擇器等級 4編輯草案，引入「:has()」關係偽類的概念。 ":has()" 提供了一種根據元素內容選擇元素的方法。

使用":has()" 選擇包含子元素的元素：

到使用下列指令選擇包含特定子元素的父元素":has()" :

parent-element:has(child-element) {
  /* styling goes here */
}

範例：

選取所有

包含 的元素child:

div:has(span) {
  /* styling goes here */
}

請注意，「:has()」仍在開發中，並非所有瀏覽器都完全支援。

以上是CSS 可以根據子元素選擇父元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！