接上两篇：

css伪类选择器应该怎样用（上）

css伪类选择器应该怎样用（中）

一、:enabled 和 :disabled

:enabled用于匹配每个启用的元素，主要用于表单元素。

:disabled 用于匹配每个禁用的元素，主要用于表单元素。

 <form action="">
 昵称: <input type="text" value="小明" /><br/>
 手机: <input type="text" value="13800000000" /><br/>
 性别: <input type="text" disabled value="男" />
 </form>
 <style>
 input:enabled{
 background:#000;
 color:seagreen;
 }
 input:disabled{
 background:slateblue;
 color:turquoise ;
 }
 </style>

当input默认是enabled属性，所以设置会显示黑色背景的输入框，当被禁用是disabled属性，显示的就是下方紫色背景。

二、:out-of-range 和 :in-range

:out-of-range 匹配元素的值在指定区间之外时显示的样式。

:in-range 匹配元素的值在指定区间时显示的样式。

注意：这俩选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性。如下：

 输入1-5之间的数字：
 <input type="number" min="1" max="5" value="3" />
 <input type="number" min="1" max="5" value="6" />
 <style>
 input:out-of-range{
 background:red;
 color:#fff;
 }
 input:in-range{
 background:slateblue;
 color:turquoise ;
 }
 </style>

三、:valid 和 :invalid

:valid匹配合法元素，同样适用于表单。

:invalid匹配非法元素，同样适用于表单。

 输入1-5之间的数字：
 <input type="number" min="1" max="5" value="3" />
 <input type="number" min="1" max="5" value="6" />
 <style>
 input:valid{
 background:red;
 color:#fff;
 }
 input:invalid{
 background:slateblue;
 color:turquoise ;
 }
 </style>

与上个案例是不是相同，但它还可以验证邮箱等字段。

<input type="email" value="admin@toutiao.com" />
<input type="email" value="toutiao.com" />
 <style>
 input:invalid{
 background:red;
 }
 </style>
明显第二是非法的,会显示红色背景。

四、:read-write和:read-only

:read-write用于匹配可读及可写的元素，即未设置 readonly 属性的元素。

:read-only用于匹配只读元素。

适用input和textarea。

 <input type="text" value="可写可读">
 <input type="text" value="只读" readonly>
 <style>
 input:read-write{
 background: rgb(226, 206, 23);
 }
 input:read-only{
 background: red;
 }
 </style>

五、:optional 和:required

:optional 匹配可选的输入元素，在表单元素是可选项时设置指定的样式，即未设置 required 属性的表单元素。

:required用于匹配设置了 required 属性的元素，在表单元素是必填项时设置指定样式。

只适用于表单元素：input、select 和 textarea。

 <input type="text" required value="必填">
 <input type="text" value="可选必填" >
 <style>
 input:required{
 background-color:brown;
 }
 input:optional{
 background-color: blueviolet;
 }
 </style>

总结

至此所有伪类/元素选择器已经写完，为了方便记忆，我将所有伪类选择器分为三类,若无印象可在文章中查看用法。

• 内容相关操作

:empty :first-of-type :last-child :last-of-type :not(selector) :nth-child(n) :nth-last-child(n) :nth-last-of-type(n) :nth-of-type(n) :only-of-type :only-child :root :first-letter :first-line :first-child :before :after :lang(language)

• a链接相关操作

:link :visited :active :hover （活动id :target）

• 表单相关操作

checked disabled enabled :in-range :invalid :optional :out-of-range :read-only :read-write :required :valid :focus

经典css选择器相关面试题

CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器、通配符选择器、属性选择器、伪类选择器

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]

!important 比内联优先级高

CSS优先级算法如何计算？

元素选择符： 1

class选择符： 10

id选择符：100

元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。

如果优先级相同，则选择最后出现的样式。

继承得到的样式的优先级最低。

浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

css3新增伪类及用法？

p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。

p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。

p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。

p:only-child选择属于其父元素唯一的子元素的每个<p>元素。

p:nth-child(n)选择属于其父元素的第n个子元素的每个<p>元素。

p:nth-last-child(n)选择属于其父元素的倒数第n个子元素的每个<p>元素。

p:nth-of-type(n)选择属于其父元素第n个<p>元素的每个<p>元素。

p:nth-last-of-type(n) 选择属于其父元素倒数第n个<p>元素的每个<p>元素。

p:last-child选择属于其父元素最后一个子元素的每个<p>元素。

p:empty选择没有子元素的每个<p>元素（包括文本节点）。

p:target 选择当前活动的<p>元素。

:not(p)选择非<p>元素的每个元素。

:enabled控制表单控件的可用状态。

:disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。