CSS选择器是CSS世界中非常重要的一环。
在CSS2之后，所有的CSS属性都是按模块去维护的。
CSS选择器也是如此，然而如今也已经发布了第四版——CSSSelectorsLevel4，这一版最早的草案发布于2011年09月29日，最后更新是2018年11月21日。
下面让我们一起来看看Level4新推出的一些选择器。
在这个分类下，我们有以下四个选择器：
其实词:not()词不算是新标签，不过在Level4里，增加了多选的功能，代码如下：
/*除了.left,.right,.top之外所以的div的盒子模型都会变成flex*/div:not(.left,.right,.top){display:flex;}/*等价于*/div:not(.left),div:not(.right),div:not(.top){display:flex;}
兼容性如下：
额。。。还不能用
:is()伪类将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
看个例子：
/*选择header,main,footer里的任意一个悬浮状态的段落(p标签)*/:is(header,main,footer)p:hover{color:red;cursor:pointer;}/*等价于*/headerp:hover,mainp:hover,footerp:hover{color:red;cursor:pointer;}
兼容如下：
:where()伪类接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。
其实就是跟:is()，唯一不同的就是:where()的优先级总是为0，但是:is()的优先级是由它的选择器列表中优先级最高的选择器决定的。
代码如下：
style:is(,,)a{color:red;}:where(,,)a{color:orange;}footera{color:blue;}/stylearticleh2:is()-styledlinks/h2sectionclass="is-styling"=""containsalink/a./sectionasideclass="is-styling"=""alsocontainsalink/a./asidefooterclass="is-styling"pThisismyfooter,alsocontainingahref=""alink/a./footer/articlearticleh2:where()-styledlinks/h2sectionclass="where-styling"=""containsalink/a./sectionasideclass="where-styling"=""alsocontainsalink/a./asidefooterclass="where-styling"pThisismyfooter,alsocontainingahref=""alink/a./footer/article
:is()跟:where()对比效果图如下：
兼容性如下：
:has()伪类代表一个元素，其给定的选择器参数（相对于该元素的:scope）至少匹配一个元素。
:has()接受一个选择器组作为参数。在当前规范中:has()并未列为实时选择器配置的一部分，意味着其不能用于样式表中。
语法如下：
//下面的选择器只会匹配直接包含img子元素的a元素a:has(img)//下面的选择器只会匹配其后紧跟着p元素的h1元素：h1:has(+p)
兼容性如下：
嗯，全红。。。
:dir()伪类匹配特定文字书写方向的元素。在HTML中,文字方向由dir属性决定。其他的文档类型可能有其他定义文字方向的方法。
:dir()并不等于使用[dir=…]属性选择器。后者匹配dir的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的，[dir=rtl]或[dir=ltr]不会匹配到dir属性的值为auto的元素。而:dir()会匹配经过客户端计算后的属性,不管是继承的dir值还是dir值为auto的。
例子如下：
style:dir(ltr){background-color:yellow;}:dir(rtl){background-color:powderblue;}/styledivdir="rtl"spantest1/spandivdir="ltr"test2divdir="auto"עִבְרִית/div/div/div
效果如下：
兼容性如下：
又是一片红。。
:lang()伪类基于元素语言来匹配页面元素。
例子如下：
/*下例表示选择文本语言带有-TN的div元素(ar-TN,fr-TN).*/div:lang(*-TN){background-color:green}
浏览器支持状态：没有一个支持的。
:any-link伪类选择器代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有href属性的a、area或link元素。因此，它会匹配到所有的:link或:visited。
例子如下：
stylea:any-link{border:1pxsolidblue;color:orange;}/*WebKit内核浏览器*/a:-webkit-any-link{border:1pxsolidblue;color:orange;}/styleahref=""Externallink/abrahref="ff8;color:black;}input{margin:4px;}/style
效果如下：
这个伪类选择器会选择HTML5中video的语言渲染以及播放过程中的时间维度相对元素。所有相关的选择器都像:matches()。这几个伪类选择器的区别在于:past会选择:current所选的元素之前的所有节点。所以，:future就是指之后的所有节点了。
例子如下：
/*Current*/:current(p,span){background-color:yellow;}/*Past*/:past,/*Future*/:future{display:none;}
兼容性如下：
目前没有任何浏览器支持
:read-only伪类选择器表示当前元素是用户不可修改的。
:read-write伪类选择器表示当前元素是用户可修改的。这个伪类选择器可以使用在一个可输入的元素或contenteditable元素（HTML5属性）。
例子如下：
style:read-only{font-size:20px;color:green;}:read-write{border:1pxsolidorange;font-size:18px;}/styleinputtype="text"placeholder='texthere'inputtype="tel"placeholder='numberhere'selectoption1/optionoption2/option/select
效果如下：
兼容性如下：
:placeholder-shown伪类在input或textarea元素显示placeholdertext时生效。
例子如下：
styleinput{border:2pxsolidblack;padding:3px;}input:placeholder-shown{border-color:silver;}/styleinputplaceholder="Typesomethinghere!"
效果如下：
兼容性如下：
:default伪类选择器表示一组相关元素中的默认表单元素。
该选择器可以在button,inputtype="checkbox",inputtype="radio",以及option上使用。
例子如下：
styleinput:default{box-shadow:002px1pxcoral;}input:default+label{color:coral;}/styleinputtype="radio"name="season"id="spring"labelfor="spring"Spring/labelinputtype="radio"name="season"id="summer"checkedlabelfor="summer"Summer/labelinputtype="radio"name="season"id="fall"labelfor="fall"Fall/labelinputtype="radio"name="season"id="winter"labelfor="winter"Winter/label
效果如下：
兼容性如下：
:indeterminate伪类选择器表示状态不确定的表单元素。
它支持：
inputtype="checkbox"元素，其indeterminate属性被JavaScript设置为true。
inputtype="radio"元素,表单中拥有相同name值的所有单选按钮都未被选中时。
处于不确定状态的progress元素
例子如下：
styleinput,span{background:red;}:indeterminate,:indeterminate+label{background:lime;}progress{margin:4px;}progress:indeterminate{opacity:0.5;background-color:lightgray;box-shadow:002px1pxred;}/styledivinputtype="checkbox"id="checkbox"labelfor="checkbox"Backgroundshouldbegreen/label/divbr/divinputtype="radio"id="radio"labelfor="radio"Backgroundshouldbegreen/label/divbr/progress/progressscript'usestrict'constinputs=('input')(input={=true})/script
效果如下：
兼容性如下：
判断有效性的伪类选择器（:valid和:invalid）匹配有效或无效，input或form元素。
:valid伪类选择器表示值通过验证的input，这告诉用户他们的输入是有效的。
:invalid伪类选择器表示值不通过通过验证的input，这告诉用户他们的输入是无效的。
例子如下：
styleinput:valid{outline:1pxsolidgreen;}input:invalid{outline:1pxsolidred;}/style输入文字：inputtype="text"pattern="[\w]+"required/br/输入电话号码：inputtype="tel"pattern="[0-9]+"required/
效果如下：
兼容性如下：
如果一个时间或数字input具有max或min属性，那么:in-range会匹配到输入值在指定范围内的input，:out-of-input则匹配输入值不在指定范围的input。如果没有规定范围，则都不匹配。
例子如下：
styleli{list-style:none;margin-bottom:1em;}input{border:1pxsolidblack;}input:in-range{background-color:rgba(0,255,0,0.25);}input:out-of-range{background-color:rgba(255,0,0,0.25);border:2pxsolidred;}input:in-range+label::after{content:'okay.';}input:out-of-range+label::after{content:'outofrange!';}/styleformaction=""id="form1"="value1"name="value1"type="number"placeholder="1to10"min="1"max="10"value="12"labelfor="value1"Yourvalueis/label/li/ul/form
效果如下：
兼容性如下：
伪类选择器:required和:optional匹配了input，select,或textarea元素。
:required表示“必填”
:optional表示“可选”
例子如下：
styleinput:required{border:1pxsolidorange;}input:optional{border:1pxsolidgreen;}/style必填的：inputtype="text"requiredbr/可选的：inputtype="text"
效果如下：
兼容性如下：
:required的兼容性在上面有。
:blank伪类选择器用于匹配如下节点：
没有子节点;
仅有空的文本节点;
仅有空白符的文本节点。
有点类似于:empty，但是比:empty宽松，目前还是没有任何一款浏览器支持。
:user-invalid伪类选择器匹配输入错误的元素。不过跟其它的输入伪类不同的是，它仅匹配用户输入时的错误，而不是静默状态下的错误，这样就会比较人性化，可惜，目前还是没有任何一款浏览器支持。
:nth-child与:nth-last-child并不是Level4才推出的伪类选择器，但是在Level4李新增了在元素组里匹配的功能。
语法如下：:nth-child/nth-last-child(An+B[ofS]?)
例子如下：
:nth-child(-n+3)
上面的例子通过传递选择器参数，选择与之匹配的第n个元素，这里表示中前三个子元素。
它跟以下规则不同：
:nth-child(-n+3)
这里表示的时候如意前三个子元素刚才是时才能被选择得到。
兼容性如下：
||组合器选择属于某个表格行的节点。
例子如下：
||td{background:gray;color:white;font-weight:bold;}/styletableborder="1"colgroupcolspan="2"/colclass="selected"//colgrouptbodytrtdAtdBtdC/trtrtdcolspan="2"D/tdtdE/td/trtrtdF/tdtdcolspan="2"G/td/tr/tbody/table
上面的例子可以使C，E与G单元格变灰。
很可惜，目前还是没有任何浏览器给予支持。
伪类选择器:nth-col()与:nth-last-col()表示选择正向或反向的表格行的节点。
语法和:nth-child与:nth-last-child类似，只不过它是选择表格内的元素。
目前还是没有任何浏览器支持。
以上便是CSS选择器Level4里新出的所有选择器，其实都是非常有用的，虽然有些选择器的浏览器支持度并不乐观的。
希望各大浏览器厂商可以赶快增加对它们的支持吧。
如何用一行CSS实现10种现代布局？
rem适配移动端的原理及应用场景
「干货」纯CSS实现瀑布流（Masonry）
手把手教你CSSgrid布局「香」
手把手教你20个CSS快速提升技巧
细品100道CSS知识点（上）「干货满满」
细品100道CSS知识点（下）「干货满满」
手把手教你CSSFlex布局「真香」
细品用SVG实现一个优雅的提示框
手把手整理CSS3知识汇总【思维导图】
手把手教你55个提高CSS开发效率的必备片段
手把手教你常见的CSS布局方式【实践】
让CSSflex布局最后一行左对齐的N种方法
妙用CSS变量，让你的CSS变得更心动
纯CSS实现简单骨骼动画【实践】
CSS揭秘实用技巧总结
你未必知道的49个CSS知识点
深入浅出超好用的CSS阴影技巧
关于前端CSS写法104个知识点汇总（一）
关于前端CSS写法104个知识点汇总（二）
前端开发规范：命名规范、html规范、css规范、js规范
CSS变量实现暗黑模式，我的小铺页面已经支持
深入浅出CSS中彻底搞懂word-break、word-wrap、white-space
深入浅出详细讲解CSS渲染原理以及优化策略
手把手教你深入CSS实现一个粒子动效的按钮
手把手教你css中多种边框的实现小窍门【实践】
手把手详细教你优化CSS提高网站加载速度的21种方法汇总【实践】
版权声明：本站所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请举报，一经查实，本站将立刻删除。