2023年4月30日，w3c發布了最新的css選擇器4級草案。本文將介紹這些最新的css4選擇器的使用方法和注意事項。
2023年4月30日，w3c發布了最新的css選擇器4級草案
。在我們開始介紹這些新的css選擇器之前，你必須要了解，這些選擇器目前在絕大部分的瀏覽器中都是不可用的。因為這只是乙份草案。這是4級css選擇器的第四份草案，第乙份草案是2023年開始起草的。草案中的新css選擇器只是一種有w3c社群的開發人員提出的一些規範。
也許在不久的將來，這些新的css4選擇器會被實現，在chrome或firefox瀏覽器中提供一些測試版本。
下面我們來一起看一下有哪些新的css4選擇器。
:not(.warning, .alert)
在css3選擇器中，我們曾經見過:not選擇器。在css4選擇器草案中，:not選擇器可以帶有多個引數，用於更複雜的匹配。
以前，:not只可以在乙個選擇器上使用，它不能組合使用。例如，css3的:not選擇器類似下面的樣子：
a:not([href*="somesite.com"])
複製**
上面的選擇器會選擇href屬性中不帶somesite.com的所有超連結元素。在css4選擇器草案中，我們可以都一些更有趣的事情。
下面的例子中，會選擇所有不是直接子元素，帶有class為col或一col開頭（類似bootstrup中的col-md-4 class）的超連結元素，並且會忽略子元素為元素的超連結。
a:not([class|="col"]>a, :has(img))
複製**
通過和:nth-last-child偽元素選擇器結合，我們可以像下面這樣寫**：
div:not(.container>div:nth-last-child(-n+2))
複製**
這將選擇所有不是.container元素的直接子元素和最後兩個兄弟元素的div元素。
你可以看到，這些css規則比以前版本的css選擇器更加強大和複雜。
:has(div, p, > a)
這個:has選擇器允許你選擇帶有引數中指定的子元素的元素。例如，選擇帶有img子元素的超連結元素，你可以使用下面的語法：
a:has(img)
複製**
然而，:has選擇器並不侷限於單個選擇器。你可以將:has選擇器和:not和:nth-*選擇器結合來更複雜的關係選擇器。
例如選擇乙個行數大於10行的**元素。
table:has(tr:nth-of-type(11))
複製**
再如選擇最後乙個子元素是footer的body元素。
body:not(:has(footer:last-child))
複製**
:any-link
當前，我們可以在超連結元素上使用:link和:visited。這種寫法比簡單的使用a選擇器更好，它會檢查href屬性，並檢查使用者瀏覽器的歷史來決定該超連結是否被訪問過。
:link, :visited
複製**
在css4選擇器中，我們可以使用:any-link為所有的超連結（訪問和為訪問過的）提供樣式，上面的**可以寫為：
:any-link
複製**
:scoped
在css選擇器中有全域性範圍（global scope）的概念。換句話說，你新增了下面的**：
div
複製**
那麼所有的div都會接受color: #444的樣式。
在css4選擇器中允許在元素中使用區域性樣式：
複製**
上面的例子中，在aside元素中使用style標籤來提供乙個區域性的樣式。這個樣式只會對style元素的父元素的後代子元素產生作用。
:matches(selector1, selector2)
:matches偽元素選擇器允許我們檢查乙個元素是否和引數列表中的元素相匹配。例如，如果你需要找出乙個article元素中的所有a、h2和p元素，可以像下面這樣寫規則：
article :matches(h2, a, p)
複製**
在以前我們需要像下面這樣來寫規則：
article a, article h2, article p
複製**
注意：在這份草案中，:matches選擇器不能和:not或:has選擇器一起使用，也不能巢狀:matches。
派生選擇器》
你可能經常使用乙個空格符來書寫後代選擇器，例如所有在div元素中的a元素：
div a
複製**
到目前為止，還沒有乙個明確的後代選擇器。在css4中，規定了乙個明確的後代選擇器：>>。
但是，這顯然有一點多餘，你可以使用乙個空格符來完成同樣的事情。w3c草案這樣設定的原因可能是由於直接後代元素選擇器使用》，而shadow-dom access選擇器使用》的原因吧。
**in-column選擇器 ||
這個選擇器是為**定製的選擇器。來看一下乙個**的基本html**：
idname
複製**
要給乙個**行新增樣式是非常簡單的事情。但是如果要為乙個**列新增樣式就不簡單了。
要為**中同一列的帶有personnel-info class的單元格新增樣式，在css4中，我們可以使用||選擇器。||選擇器允許你選擇所有帶personnel-info的td元素。
.personnel-info || td
複製** 小結
這篇文章是關於新的css4選擇器草案的介紹。這些新的選擇器更加強大和複雜，但是目前還沒有瀏覽器可以使用這些選擇器。這使我們看到，技術每天都在更新，我們也應該不斷的學習和充實自己。
via:
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
4 CSS 派生選擇器
通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。在 css1 中，通過這種方式來應用規則的選擇器被稱為上下文選擇器 contextual selectors 這是由於它們依賴於上下文關係來應用或者避免某項規則。在 css2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...