本篇文章展示了css中偽類選擇器的使用具體操作，代碼簡明扼要容易理解，絕對能讓你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),格爾木企業(yè)網(wǎng)站建設(shè),格爾木品牌網(wǎng)站建設(shè),網(wǎng)站定制,格爾木網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,格爾木網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

:not

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

以上是MDN對not的解釋

 

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

最簡單的例子，用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;
}

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

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

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

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

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的解釋

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

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

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

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

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

舉例：將header和main下的p標(biāo)簽，在鼠標(biāo)hover時文字變藍(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的左右，但是并沒有完全體現(xiàn)出is的強大之處,但是當(dāng)選擇的內(nèi)容變多之后，特別是那種層級較多的，會發(fā)現(xiàn)is的寫法有多簡潔，拿MDN的一個例子看下

之前的寫法

/* 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;
}

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

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

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

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

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

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

看完上述內(nèi)容，你們掌握css中偽類選擇器的使用方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：css中偽類選擇器的使用
標(biāo)題路徑：http://www.ekvhdxd.cn/article20/pjeeco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站策劃、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、手機網(wǎng)站建設(shè)、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)