css偽類選擇器:is :not實例分析

本文小編為大家詳細介紹“css偽類選擇器:is :not實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css偽類選擇器:is :not實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　:not

　　The:not()CSSpseudo-classrepresentselementsthatdonotmatchalistofselectors.Sinceitpreventsspecificitemsfrombeingselected,itisknownasthenegationpseudo-class.

　　以上是MDN對not的解釋

　　推薦學習：CSS視頻教程

　　單從名字上我們應該能對它有大概的認知，非選擇，排除括號內的其它元素

　　最簡單的例子，用CSS將div內，在不改變html的前提下，除了P標簽，其它的字體顏色變成藍色，

　　<div>

　　<span>我是藍色</span>

　　<p>我是黑色</p>

　　<h2>我是藍色</h3>

　　<h3>我是藍色</h3>

　　<h4>我是藍色</h4>

　　<h5>我是藍色</h5>

　　<h6>我是藍色</h6>

　　</div>

　　之前的做法

　　divspan,divh3,divh4,divh5,{

　　color:blue;

　　}

　　not寫法

　　div:not(p){

　　color:blue;

　　}

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

　　下面升級一下，問：將div內除了span和p，其它字體顏色變藍色

　　div:not(p):not(span){

　　color:blue;

　　}

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

　　div:not(p,span){

　　color:blue;

　　}

　　兼容

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

　　:is

　　The:is()CSSpseudo-classfunctiontakesaselectorlistasitsargument,andselectsanyelementthatcanbeselectedbyoneoftheselectorsinthatlist.Thisisusefulforwritinglargeselectorsinamorecompactform.

　　以上是MDN的解釋

　　在說is前，需要先了解一下matches

　　matches跟is是什么關系？

　　matches是is的前世，但是本質上確實一個東西，用法完全一樣

　　matches這個單詞意思跟它的作用非常匹配，但是它跟not作用恰好相反，作為not的對立面，matches這個次看起來確實格格不入，而且單詞不夠簡潔，所以它被改名了，這里還有一個issuehttps://github.com/w3c/csswg-drafts/issues/3258，也就是它改名的源頭

　　好了，現在知道matches和is其實是一個東西，那么is的用法是怎樣的呢？

　　舉例：將header和main下的p標簽，在鼠標hover時文字變藍色

　　<header>

　　<ul>

　　<li><p>鼠標放上去變藍色</p></li>

　　<li><p>鼠標放上去變藍色</p></li>

　　</ul>

　　<p>正常字體</p>

　　</header>

　　<main>

　　<ul>

　　<li><p>鼠標放上去變藍色</p></li>

　　<li><p>鼠標放上去變藍色</p></li>

　　<p>正常字體</p>

　　</ul>

　　</main>

　　<footer>

　　<ul>

　　<li><p>正常字體</p></li>

　　<li><p>正常字體</p></li>

　　</ul>

　　</footer>

　　之前的做法

　　headerulp:hover,mainulp:hover{

　　color:blue;

　　}

　　is寫法

　　:is(header,main)ulp:hover{

　　color:blue;

　　}

　　從上面的例子大概能看出is的左右，但是并沒有完全體現出is的強大之處,但是當選擇的內容變多之后，特別是那種層級較多的，會發現is的寫法有多簡潔，拿MDN的一個例子看下

　　之前的寫法

　　/*Level0*/

　　h2{

　　font-size:30px;

　　}

　　/*Level1*/

　　sectionh2,articleh2,asideh2,navh2{

　　font-size:25px;

　　}

　　/*Level2*/

　　sectionsectionh2,sectionarticleh2,sectionasideh2,sectionnavh2,

　　articlesectionh2,articlearticleh2,articleasideh2,articlenavh2,

　　asidesectionh2,asidearticleh2,asideasideh2,asidenavh2,

　　navsectionh2,navarticleh2,navasideh2,navnavh2{

　　font-size:20px;

　　}

　　is寫法

　　/*Level0*/

　　h2{

　　font-size:30px;

　　}

　　/*Level1*/

　　:is(section,article,aside,nav)h2{

　　font-size:25px;

　　}

　　/*Level2*/

　　:is(section,article,aside,nav)

　　:is(section,article,aside,nav)h2{

　　font-size:20px;

　　}

　　可以看出，隨著嵌套層級的增加，is的優勢越來越明顯

　　說完了is，那就必須認識一下any,前面說到is是matches的替代者，

　　any跟is又是什么關系呢？

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

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

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

　　}

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

　　}

讀到這里，這篇“css偽類選擇器:is :not實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。