not

 

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

 

　　以上是MDN对not的解释

 

　　推荐学习：CSS视频教程

 

　　单从名字上我们应该能对它有大概的认知，非选择，排除括号内的其它元素

 

　　最简单的例子，用CSS将div内，在不改变html的前提下，除了P标签，其它的字体颜色变成蓝色，

 

　　<div>

 

　　<span>我是蓝色</span>

 

　　<p>我是黑色</p>

 

　　<h1>我是蓝色</h2>

 

　　<h2>我是蓝色</h2>

 

　　<h3>我是蓝色</h3>

 

　　<h4>我是蓝色</h4>

 

　　<h5>我是蓝色</h5>

 

　　</div>

 

　　之前的做法

 

　　divspan,divh2,divh3,divh4,{

 

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

 

　　h1{

 

　　font-size:30px;

 

　　}

 

　　/*Level1*/

 

　　sectionh1,articleh1,asideh1,navh1{

 

　　font-size:25px;

 

　　}

 

　　/*Level2*/

 

　　sectionsectionh1,sectionarticleh1,sectionasideh1,sectionnavh1,

 

　　articlesectionh1,articlearticleh1,articleasideh1,articlenavh1,

 

　　asidesectionh1,asidearticleh1,asideasideh1,asidenavh1,

 

　　navsectionh1,navarticleh1,navasideh1,navnavh1{

 

　　font-size:20px;

 

　　}

 

　　is写法

 

　　/*Level0*/

 

　　h1{

 

　　font-size:30px;

 

　　}

 

　　/*Level1*/

 

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

 

　　font-size:25px;

 

　　}

 

　　/*Level2*/

 

　　:is(section,article,aside,nav)

 

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

 

　　font-size:20px;

 

　　}

 

　　可以看出，随着嵌套层级的增加，is的优势越来越明显

 

　　说完了is，那就必须认识一下any,前面说到is是matches的替代者，

 

　　any跟is又是什么关系呢？

 

　　是的，is也是any的替代品，它解决了any的一些弊端，比如浏览器前缀、选择性能等

 

　　any作用跟is完全一样，唯一不同的是它需要加浏览器前缀，用法如下

 

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

 

　　}

 

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

 

　　}





本文转载自中文网