日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

div i
p i
div span
p span
h2 span
h2 i

div span,
div i,
p span,
p i {
    color: red;
}

:is(div, p) :is(span, i) {
    color: red;
}

ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

div p::before,
div p::after {
    content: "";
    //...
}

div p:is(::before, ::after) {
    content: "";
    //...
}

    where & is test



    where & is test

div .test-class {
    color: red;
}

div :is(p) {
    color: blue;
}

div :is(p, #text-id) {
    color: blue;
}

div p {
    color: blue;
}
div #text-id {
    color: blue;
}

:is(div, p) span {}
// 等同于
:-webkit-any(div, p) span {}
:-moz-any(div, p) span {}
:matches(div, p) span {}

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

    
where & is test

:is(div) p {
    color: red;
}
:where(div) p {
    color: green;
}

    
where & is test

:is(div) p {
    color: red;
}
:where(#container) p {
    color: green;
}

/* 組合*/
:is(h2,h3) :where(.test-a, .test-b) {
  text-transform: uppercase;
}
/* 嵌套*/
.title:where(h2, h3, :is(.header, .footer)) {
  font-weight: bold;
}

div.a

div:not(.b) {
    color: red;
}

div:not(.b) 它可以選擇除了 class 為 .b 元素之外的所有 div 元素：

MDN 的錯誤例子？一個有意思的現(xiàn)象

有趣的是，在 MDN 介紹 :not 的頁面，有這樣一個例子：

/* Selects any element that is NOT a paragraph */
:not(p) {
  color: blue;
}

意思是，:not(p) 可以選擇任何不是

標簽的元素。然而，上面的 CSS 選擇器，在如下的 HTML 結構，實測的結果不太對勁。

p

div
span
h2

結果如下：

意思是，:not(p) 仍然可以選中

元素。我嘗試了多個瀏覽器，得到的效果都是一致的。

這是為什么呢？這是由于 :not(p) 同樣能夠選中 ，那么 的 color 即變成了 blue，由于 color 是一個可繼承屬性，

標簽繼承了 的 color 屬性，導致看到的

也是藍色。

我們把它改成一個不可繼承的屬性，試試看：

/* Selects any element that is NOT a paragraph */
:not(p) {
  border: 1px solid;
}

OK，這次

沒有邊框體現(xiàn)，沒有問題！實際使用的時候，需要注意這一層繼承的問題！

:not 的優(yōu)先級問題

下面是一些使用 :not 需要注意的問題。

:not、:is、:where 這幾個偽類不像其它偽類，它不會增加選擇器的優(yōu)先級。它的優(yōu)先級即為它參數(shù)選擇器的優(yōu)先級。

并且，在 CSS Selectors Level 3，:not() 內(nèi)只支持單個選擇器，而從  CSS Selectors Level 4 開始，:not() 內(nèi)部支持多個選擇器，像是這樣：

/* CSS Selectors Level 3，:not 內(nèi)部如果有多個值需要分開 */
p:not(:first-of-type):not(.special) {
}
/* CSS Selectors Level 4 支持使用逗號分隔*/
p:not(:first-of-type, .special) {
}

與 :is() 類似，:not() 選擇器本身不會影響選擇器的優(yōu)先級，它的優(yōu)先級是由它的選擇器列表中優(yōu)先級最高的選擇器決定的。

:not(*) 問題

使用 :not(*) 將匹配任何非元素的元素，因此這個規(guī)則將永遠不會被應用。

相當于一段沒有任何意義的代碼。

:not() 不能嵌套 :not()

禁止套娃。:not 偽類不允許嵌套，這意味著 :not(:not(...)) 是無效的。

:not() 實戰(zhàn)解析

那么，:not() 有什么特別有意思的應用場景呢？我這里列舉一個。

在 W3 CSS selectors-4 規(guī)范 中，新增了一個非常有意思的 :focus-visible 偽類。

:focus-visible 這個選擇器可以有效地根據(jù)用戶的輸入方式(鼠標 vs 鍵盤)展示不同形式的焦點。

有了這個偽類，就可以做到，當用戶使用鼠標操作可聚焦元素時，不展示 :focus 樣式或者讓其表現(xiàn)較弱，而當用戶使用鍵盤操作焦點時，利用 :focus-visible，讓可獲焦元素獲得一個較強的表現(xiàn)樣式。

看個簡單的 Demo：

Test 1

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}

使用鼠標點擊：

可以看到，使用鼠標點擊的時候，觸發(fā)了元素的 :active 偽類，也觸發(fā)了 :focus偽類，不太美觀。但是如果設置了 outline: none 又會使鍵盤用戶的體驗非常糟糕。因為當鍵盤用戶使用 Tab 嘗試切換焦點的時候，會因為 outline: none 而無所適從。

因此，可以使用 :focus-visible 偽類改造一下：

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}
button:focus:not(:focus-visible) {
  outline: none;
}

看看效果，分別是在鼠標點擊 Button 和使用鍵盤控制焦點點擊 Button：

可以看到，使用鼠標點擊，不會觸發(fā) :foucs，只有當鍵盤操作聚焦元素，使用 Tab 切換焦點時，outline: 2px solid red 這段代碼才會生效。

這樣，我們就既保證了正常用戶的點擊體驗，也保證了無法使用鼠標的用戶的焦點管理體驗，在可訪問性方面下了功夫。

值得注意的是，這里為什么使用了 button:focus:not(:focus-visible) 這么繞的寫法而不是直接這樣寫呢：

button:focus {
  outline: unset;
}
button:focus-visible {
  outline: 2px solid red;
}

解釋一下，button:focus:not(:focus-visible) 的意思是，button 元素觸發(fā) focus 狀態(tài)，并且不是通過 focus-visible 觸發(fā)，理解過來就是在支持 :focus-visible 的瀏覽器，通過鼠標激活 :focus 的 button 元素，這種情況下，不需要設置 outline。

為的是兼容不支持 :focus-visible 的瀏覽器，當 :focus-visible 不兼容時，還是需要有 :focus 偽類的存在。

因此，這里借助 :not() 偽類，巧妙的實現(xiàn)了一個實用效果的方案降級。

這里有點繞，需要好好理解理解。

:not 兼容性

經(jīng)歷了 CSS Selectors Level 3 & CSS Selectors Level 4 兩個版本，到今天（2020-05-04），除去 IE 系列，:not 的兼容性已經(jīng)非常之好了：

:has 偽類選擇器

OK。最后到所有邏輯選擇器里面最重磅的 :has 出場了。它之所以重要是因為它的誕生，填補了在之前 CSS 選擇器中，沒有核心意義上真正的父選擇器的空缺。

:has 偽類接受一個選擇器組作為參數(shù)，該參數(shù)相對于該元素的 :scope 至少匹配一個元素。

實際看個例子：

    
div -- p


    div -- p.has



    
div -- p

div:has(.g-test-has) {
    border: 1px solid #000;
}

我們通過 div:has(.g-test-has) 選擇器，意思是，選擇 div 下存在 class 為 .g-test-has 的 div 元素。

注意，這里選擇的不是 :has() 內(nèi)包裹的選擇器選中的元素，而是使用 :has() 偽類的宿主元素。

效果如下：

可以看到，由于第二個 div 下存在 class 為 .g-test-has 的元素，因此第二個 div 被加上了 border。

:has() 父選擇器 -- 嵌套結構的父元素選擇

我們再通過幾個 DEMO 加深下印象。:has() 內(nèi)還可以寫的更為復雜一點。

    div span



    

        

            
div ul li h3 span
        
    



    
div h3 span

div:has(>h3>span) {
    margin-left: 24px;
    border: 1px solid #000;
}

這里，要求準確選擇 div 下直接子元素是 h3，且 h3 下直接子元素有 span 的 div 元素。注意，選擇的最上層使用 :has() 的父元素 div。結果如下：

這里體現(xiàn)的是嵌套結構，精確尋找對應的父元素。

:has() 父選擇器 -- 同級結構的兄元素選擇

還有一種情況，在之前也比較難處理，同級結構的兄元素選擇。

看這個 DEMO：

div + p