CSS：IS，：wery and：：pseudo-class選擇器工作

鑰匙要點

• css pseudo-class選擇器：is（），：wheing（）和：has（）提供了針對HTML元素的新方法。 ：IS（）選擇器允許對多個元素進行更有效的樣式，從而減少了對詳細選擇器字符串的需求。 ：where（）選擇器的運行方式與：is（），但具有零特異性，使其可用於應用基線樣式而無需提高特異性。 ：HAS（）選擇器針對包含其他其他元素的元素，提供了一種已久的靶向父元素的方法。
：is（）和：where（）偽級選擇器在所有現代瀏覽器中都受支持，但在Internet Explorer中不支持。 ：HAS（）選擇器當前是新的，但預計到2023年將廣泛使用。使用這些選擇器可以簡化CSS語法並減少CSS預處理器的需求。
• ：is（）和：where（）選擇器的特異性不同。 ：IS（）選擇器具有與其參數中最特定的選擇器相同的特異性，而：where（）選擇器的特異性為零。這對於CSS重置可能是實用的，CSS重置在沒有特定樣式的情況下應用樣式的基線，無論特異性如何，都可以覆蓋任何CSS的重置樣式。
>
• CSS選擇器允許您按類型，屬性或HTML文檔中的位置選擇元素。本教程解釋了三個新的選項：：is（），：wheing（）和：has（）。 選擇器通常在樣式表中使用。以下示例找到了所有

  段落元素，並將字體重量更改為粗體：

您還可以使用JavaScript中的選擇器來定位DOM節點：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

document.queryselector（）返回第一個匹配的html元素

• document.queryselectorall（）返回類似數組的Nodelist中的所有匹配的HTML元素
偽級選擇器基於其當前狀態靶向HTML元素。也許最著名的是：懸停，它在光標移動到元素上時採用樣式，因此它用於突出可點擊的鏈接和按鈕。其他流行的選項包括：
：訪問：匹配訪問鏈接

：目標：與文檔URL
• 靶向的元素匹配
：第一個孩子：針對第一個子元素
：nth-​​child：選擇特定的子元素
：空：匹配沒有內容或子元素的元素
：檢查：匹配一個切換的複選框或單選按鈕
：空白：樣式一個空輸入字段
：啟用：匹配啟用的輸入字段
：禁用：匹配禁用輸入字段
：必需：目標一個必需的輸入字段
• >
：有效：匹配有效的輸入字段
：無效：匹配一個無效的輸入字段
：播放：定位播放音頻或視頻元素

瀏覽器最近收到了另外三個偽級選擇器…

css：是偽級選擇器

注意：最初指定為：matches（）和：any（），但是：is（）已成為CSS標準。 您通常需要將相同的樣式應用於多個元素。例如，

段落文本默認為黑色，但是當它出現在，或中時灰色：

這是一個簡單的例子，但是更複雜的頁面將導致更複雜和更詳細的選擇器字符串。任何選擇器中的語法錯誤都可以打破所有元素的樣式。 CSS預處理器，例如SASS許可證嵌套（也將介紹給本機CSS）：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

這會創建相同的CSS代碼，減少打字工作並防止錯誤。但：

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

>直到本地築巢到達，您將需要一個CSS構建工具。您可能需要使用SASS之類的選項，但這可能會引入某些開發團隊的並發症。
• 嵌套會導致其他問題。構造深嵌套的選擇器變得越來越難以閱讀和輸出冗長的CSS。
：is（）提供了一個本機CSS解決方案，該解決方案在所有現代瀏覽器（不是IE）中都具有全部支持：
• 單個選擇器可以包含任何數字：IS（）偽級。例如，以下複雜選擇器將綠色文本顏色應用於所有

  ，

  和

  元素，這些元素是的孩子，該具有一類。 的第一個孩子：

不含：IS（）的等效代碼需要六個CSS選擇器：

請注意：IS（）無法匹配:: pseudo-emlements之後，因此此示例代碼將失敗：

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

css：pseudo-class選擇器

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

：withing（）選擇器語法與：IS（）相同，並且在所有現代瀏覽器（不是IE）中也得到了支持。它通常會導致相同的樣式。例如：

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

差異是

>特異性

。特異性是用於確定哪些CSS選擇器應覆蓋所有其他算法的算法。在下面的示例中，第P條比單獨的P更具體，因此中的所有段落元素都是灰色的：

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

如果是：is（），特異性是其參數中最特定的選擇器。如果是：where（），特異性為零。 考慮以下CSS： 讓我們將此CSS應用於以下HTML： 如下所示，段落文本將被塗上紅色。

<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

請參閱筆 使用：IS sitepoint（@SitePoint）的選擇器 在codepen。

<span>article p { color: #444; }
</span><span>p { color: #000; }
</span>

上：IS（）選擇器具有與文章P的特異性相同的特異性，但是在樣式表的稍後，因此文本變成紅色。有必要刪除p和：IS（）選擇器以應用藍色的顏色，因為：where（）選擇器比任何一個都不具體。 將使用更多的代碼庫：IS（）而不是：whese（）。但是，零特異性的零特異性：（）對於CSS重置可能是實用的，CSS重置是在沒有特定樣式的情況下應用標準樣式的基線。通常，RESETS應用默認字體，顏色，槳和邊距。 此CSS重置代碼將1EM的最高邊距應用於

標題，除非它們是元素的第一個孩子：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

試圖在樣式表的稍後設置自定義

沒有效果，因為文章：第一孩子具有更高的特異性：

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

您可以使用更高特異性的選擇器來解決此問題，但對於其他開發人員來說，它是更多的代碼，不一定是顯而易見的。您最終會忘記為什麼需要它：

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

您還可以通過應用於每種樣式的重要性來解決問題，但是請避免這樣做！ 一個更好的選擇是在您的CSS重置中採用零特異性：white（）：

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

現在，無論特異性如何，您都可以覆蓋任何CSS重置樣式；無需進一步的選擇器或！重要：

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

CSS：具有偽級選擇器

：has（）選擇器使用類似的語法為：is（）和：wheing（），但它針對一個

包含>的元素。例如，這是在任何包含一個或多個>或標籤的鏈接中添加藍色的兩金邊框的CSS： 這是幾十年來最令人興奮的CSS發展！

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

開發人員終於有一種方法來瞄準父元素！ 難以捉摸的“家長選擇器”一直是最要求的CSS功能之一，但它會使瀏覽器供應商的性能並發症，因此已經很長時間了。用簡單的術語：

瀏覽器在頁面上繪製時將CSS樣式應用於元素。因此，在添加進一步的子元素時，必須重新繪製整個父元素。
• >
添加，刪除或修改JavaScript中的元素可能會影響整個頁面的樣式，直至封閉。
• 。

假設供應商已經解決了績效問題，則引入了：HAS（）允許在過去的JavaScript上可能是不可能的。例如，當任何必需的內部字段無效時，您可以設置外部形式

的樣式

和以下提交按鈕：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

此示例添加了一個導航鏈接子enu指標，其中包含一個子菜單項列表：

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

或者，也許您可​​以添加調試樣式，例如突出顯示所有元素而沒有內部IMG：

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

在您跳入編輯器並重構CSS代碼庫之前，請注意：HAS（）是新的，並且支持比：is（）和：where（）更有限。它可以在Safari 15.4和Chrome 101中提供，但在2023年之前應廣泛使用。

選擇器摘要

：is（）和：wheing（）偽級選擇器簡化了CSS語法。您對嵌套和CSS預處理器的需求更少（儘管這些工具還提供了其他好處，例如部分，循環和縮小）。 ：has（）更具革命性和令人興奮的作用。父母的選擇將迅速流行，我們將忘記黑暗時代！我們將在所有現代瀏覽器中可用時發布完整的：has（）教程。 如果您想對CSS偽級選擇器進行更深入的研究，以及所有其他CSS（例如網格和Flexbox），請查看Tiffany Brown的《很棒的書》css Master 。

經常詢問有關CSS的問題（FAQ）：is（）和：wheing（）偽級選擇器

>

：is（）和：where（）pseudo-class選擇器之間的主要區別是什麼？在於它們的特殊性。 ：IS（）偽級選擇器具有與放置在其中的選擇器相同的特異性。另一方面，：where（）偽級選擇器的特異性為零，這意味著它不會有助於選擇器的整體特異性。當您要在不增加特異性的情況下將樣式應用於一組元素時，這可能特別有用。

>我可以使用：is（）和：where（）pseudo-class selectors具有所有CSS屬性？ >

是的，您可以使用：is（）和：wheing（）偽級選擇器具有所有CSS屬性。這些偽級選擇器與特定的CSS屬性無關。它們用於根據某些條件選擇元素，您可以將任何CSS屬性應用於選定的元素。

is：is（）和：where（）pseudo-class選擇器在所有瀏覽器中支持？

>：is：is（）和：where（）pseudo-class選擇器是CSS的相對較新的添加在大多數現代瀏覽器中支持。但是，在較舊的瀏覽器或某些版本的Internet Explorer中可能不支持它們。在使用代碼中使用這些選擇器之前，請檢查網站上的當前瀏覽器支持總是一個好主意。

>如何使用：is：is（）pseudo-class selector在css中？ >

：IS（）在CSS中的偽級選擇器允許您將多個選擇器分組為一個。例如，您可以使用：is（）pseudo-class選擇器像這樣的h1，h2和h3編寫三個獨立的選擇器，例如： }。

>我如何使用CSS中的pseudo-class選擇器？ IS（）偽級選擇器，但具有零特異性。例如，您可以使用它來選擇具有特定類別的所有元素，而不會增加特異性：： where（.class1，.class2，.class3）{color：blue; 。當您要選擇滿足多個條件的元素時，這可能很有用。例如，您可以在類似的div元素中選擇所有H1和H2元素：DIV：IS（H1，H2）{顏色：藍色； }。

>我可以使用：is（）and：where（）偽級選擇器帶有偽元素的選擇器嗎？

是的，您可以使用：is（）和：where（）pseudo - 具有偽元素的類選擇器。例如，您可以選擇像這樣的H1和H2元素的所有首字母：： IS（H1，H2）::第一字母{color：blue; }。

>我可以使用：is（）and：where（）pseudo-class選擇器具有屬性選擇器？

是的，您可以使用：is（）和：where（）pseudo---具有屬性選擇器的類選擇器。例如，您可以使用這樣的數據屬性選擇所有元素：： IS（[data-attribute]）{顏色：blue; }。

>我可以使用：is（）和：where（）pseudo-class選擇器具有類選擇器？

是的，您可以使用：is（）and：where（）pseudo--類選擇器的類選擇器。例如，您可以選擇所有類似某個類別的元素：： IS（.class1，.class2，.class3）{color：blue; }。

>我可以使用：is（）and：where（）pseudo-class選擇器具有ID選擇器的pseudo-class選擇器嗎？

是的，您可以使用：is（）和：where（）pseudo--具有ID選擇器的類選擇器。例如，您可以選擇具有這樣的ID的所有元素：： IS（＃ID1，＃ID2，＃ID3）{顏色：blue; }。

以上是CSS：IS，：wery and：：pseudo-class選擇器工作的詳細內容。更多資訊請關注PHP中文網其他相關文章！