
续接上次怎样使用CSS3伪类(三),这次继续介绍目标伪类(Target Pseudo-Class)、UI元素状态伪类(UI Element States Pseudo-Class)和否定式伪类(Negation Pseudo-Class)。
目标伪类
E:target
这是一个十分好用的伪类,因为使用该方法可以根据页面链接的URL来对元素进行样式的设定,也就是说对该链接的目标进行设定。这里有个例子可以清晰的表述这个概念。使用很简单:
:target { background-color: #fcc; }
UI元素状态伪类
E:enabled 与 E:disabled
:checked,:enabled与:disabled三个共同构成了UI元素状态的三种伪类。这样,就可以通过元素的状态进行选择。状态可以由用户(例如,input:checked),也可以由开发人员来确定(例如,input:disabled)。使用方法如下所示:
input:enabled { background-color: #dfd; }
input:disabled { background-color: #fdd; }
这样给予用户直观的感受,哪儿可以输入哪儿不可以。
E:checked
利用该伪类可以对选中的复选框或者单选按钮进行选择。例如:
input[type=radio]:checked { font-weight: bold; }
否定式伪类
E:not
顾名思义,该伪类可以选中除了某个特定元素以外的元素。例如:
:not(footer) { … }
这样就会选中除了页脚以外的所有元素。当与输入同时使用时,会变得稍微复杂一些。
input:not([type=submit]) { … }
input:not(disabled) { … }
第一行选中除了submit按钮之外的所有元素,第二行选中所有使能的input。
这样,CSS3中新添加的所有伪类就全部介绍完了,这个系列也就进入尾声了。下次将就CSS3中的伪类进行一些浏览器兼容性等其他方面的分析,敬请期待。



