css偽類選擇器:is :not的介紹

這篇文章主要介紹“css偽類選擇器:is :not的介紹”，在日常操作中，相信很多人在css偽類選擇器:is :not的介紹問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css偽類選擇器:is :not的介紹”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

單從名字上我們應(yīng)該能對(duì)它有大概的認(rèn)知，非選擇，排除括號(hào)內(nèi)的其它元素

最簡(jiǎn)單的例子，用CSS將div內(nèi)，在不改變html的前提下，除了P標(biāo)簽，其它的字體顏色變成藍(lán)色，

<div>    <span>我是藍(lán)色</span>    <p>我是黑色</p>    <h2>我是藍(lán)色</h3>    <h3>我是藍(lán)色</h3>    <h4>我是藍(lán)色</h4>    <h5>我是藍(lán)色</h5>    <h6>我是藍(lán)色</h6></div>

之前的做法

div span,div h3,div h4, div h5,{  color: blue;}

not寫法

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

從上面的例子可以明顯體會(huì)到not偽類選擇器的作用

下面升級(jí)一下，問(wèn)：將div內(nèi)除了span和p，其它字體顏色變藍(lán)色

div:not(p):not(span){  color: blue;}

還有更為簡(jiǎn)潔的方法，如下，但是目前兼容不太好，不建議使用

div:not(p,span){  color: blue;}

兼容

除IE8，目前所有主流瀏覽器都支持，可以放心使用

:is

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

以上是MDN的解釋

在說(shuō)is前，需要先了解一下matches

matches跟is是什么關(guān)系？

matches是is的前世，但是本質(zhì)上確實(shí)一個(gè)東西，用法完全一樣

matches這個(gè)單詞意思跟它的作用非常匹配，但是它跟not作用恰好相反，作為not的對(duì)立面，matches這個(gè)次看起來(lái)確實(shí)格格不入，而且單詞不夠簡(jiǎn)潔，所以它被改名了，這里還有一個(gè)issue https://github.com/w3c/csswg-drafts/issues/3258，也就是它改名的源頭

好了，現(xiàn)在知道m(xù)atches和is其實(shí)是一個(gè)東西，那么is的用法是怎樣的呢？

舉例：將header和main下的p標(biāo)簽，在鼠標(biāo)hover時(shí)文字變藍(lán)色

<header>  <ul>    <li><p>鼠標(biāo)放上去變藍(lán)色</p></li>    <li><p>鼠標(biāo)放上去變藍(lán)色</p></li>  </ul>  <p>正常字體</p></header><main>  <ul>    <li><p>鼠標(biāo)放上去變藍(lán)色</p></li>    <li><p>鼠標(biāo)放上去變藍(lán)色</p></li>    <p>正常字體</p>  </ul></main><footer>  <ul>    <li><p>正常字體</p></li>    <li><p>正常字體</p></li>  </ul></footer>

之前的做法

header ul p:hover,main ul p:hover{  color: blue;}

is寫法

:is(header, main) ul p:hover{  color: blue;}

從上面的例子大概能看出is的左右，但是并沒(méi)有完全體現(xiàn)出is的強(qiáng)大之處,但是當(dāng)選擇的內(nèi)容變多之后，特別是那種層級(jí)較多的，會(huì)發(fā)現(xiàn)is的寫法有多簡(jiǎn)潔，拿MDN的一個(gè)例子看下

之前的寫法

/* Level 0 */h2 {  font-size: 30px;}/* Level 1 */section h2, article h2, aside h2, nav h2 {  font-size: 25px;}/* Level 2 */section section h2, section article h2, section aside h2, section nav h2,article section h2, article article h2, article aside h2, article nav h2,aside section h2, aside article h2, aside aside h2, aside nav h2,nav section h2, nav article h2, nav aside h2, nav nav h2 {  font-size: 20px;}

is寫法

/* Level 0 */h2 {  font-size: 30px;}/* Level 1 */:is(section, article, aside, nav) h2 {  font-size: 25px;}/* Level 2 */:is(section, article, aside, nav):is(section, article, aside, nav) h2 {  font-size: 20px;}

可以看出，隨著嵌套層級(jí)的增加，is的優(yōu)勢(shì)越來(lái)越明顯

說(shuō)完了is，那就必須認(rèn)識(shí)一下any,前面說(shuō)到is是matches的替代者，

any跟is又是什么關(guān)系呢？

是的，is也是any的替代品，它解決了any的一些弊端，比如瀏覽器前綴、選擇性能等

any作用跟is完全一樣，唯一不同的是它需要加瀏覽器前綴，用法如下

:-moz-any(.b, .c) {}:-webkit-any(.b, .c) { }

結(jié)論

通過(guò)上面的介紹大概講述了css偽類is,not,matches,any它們?nèi)叩年P(guān)系

到此，關(guān)于“css偽類選擇器:is :not的介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！