接css3选择器(一)
接css3 选择器(二)
这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始。
一、【:enabled】选择器一看这个属性就知道是专为表单元素提供的。在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。
举例:可用输入框设置样式。
二、【:disabled】选择器
看到有【:enabled】选择器,就知道肯定有【:disabled】选择器了。看名字就知道:disabled选择器和:enabled选择器相反,用来匹配不可用的表单元素。要使用:disabled选择器,需要在表单元素中设置"disbled"属性。
举例:
三、【:checked】 选择器
在表单元素中,单选按钮和复选按钮都有选中和未选中状态。如果有做过尝试就知道,要设置这两个按钮默认样式是比较困难的。而在css3中,可以通过:checked选择器配合其他标签实现自定义样式。而:checked表示的是选中状态。
这个是个大招,可以省不少功夫。
举例:使用:checked选择器模拟实现复选框样式。
模拟实现一个选中和未选中的样式。
没有样式时的效果图如下,
最终添加样式后效果如下。
举例::checked状态选择器模拟单选按钮样式。
四、【::selection】 选择器
设置选中文本样式,详情见CSS3 ::selection选择器,用的好也可以出奇制胜。
五、【:read-only】选择器:read-only选择器用来指定处于只读状态元素的样式。简单说就是设置了“readonly”=readonly的元素。
举例:
六、【:read-write】选择器
有了【:read-only】,再来个与之相反的【:read-write】意思很明确,就是即可读,也可写的元素设置样式。我觉得这个选择器可能只是充数的,为了让css3选择器成为一个体系而加的,因为默认情况就是可读可写的啊。
上面的例子中如果改一点样式:给input[type="text"]加上:read-write选择器
input[type="text"]:read-write{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px;}
效果如下:
即无法给国籍这个输入框添加圆角之类的样式。
七、【::before】和【::after】慕课网这样讲:
::before和::after这两个伪元素主要用来给元素的前面或者后面插入内容,和“content” 配合使用,使用的场景最多的就是清除浮动。
其实::before和::after内容还是比较多的,了解更多可参考::before和::after伪元素的用法。
PS:每次看到慕课网这种偶巴,好厉害。的东东,就有种淡淡的忧桑,有木有想过妹子们的感受。
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:有问题欢迎与我讨论,共同进步。