4. 伪类
动态伪类
之所以被称为动态伪类是因为它们并不存在于HTML中——而是只有当用户和网站交互的时候才会呈现。
有两类动态伪类:链接 和用户行为。链接就是:link 和:visited,而用户行为包括:hover、:active 和:focus。
在本文中提到的css选择器中,这几个应该是最常用到的。
:link伪类用于链接尚未被用户访问的时候,而:visited 伪类用于用户访问过的链接,也就是说它们是相反的。
:hover伪类用于用户移动他们的鼠标在元素上,而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后,:focus伪类用于元素成为焦点的时候——最常用于表单元素。
你可以在你的样式表中使用多种用户行为动态伪类,这样你就可以,比如,根据用户的鼠标只是滑过或悬停的时候,为一个输入框定义不同的背景色:
input:focus { background: #D2D2D2; border: 1px solid #5E5E5E; } input:focus:hover { background: #C7C7C7; }
浏览器兼容性
动态伪类被所有的现代浏览器支持,甚至IE6,但是请注意,对于IE系列浏览器来说,IE6只允许:hover 伪类应用于链接元素(a标签)而且只有IE8接受:active状态。
:first-child :first-child伪类允许你定位某个元素第一个子元素。比如,如果你想给你的无须列表的第一个li添加一个margin-top,你就可以这样写:
ul > li:first-child { margin-top: 10px; }
让我们来看一看另一个例子:比如你想让你的博客的侧栏的H2标签都有个顶部边距,以将标题和它们前面的内容区分开来,但是第一个h2不需要,你就可以使用下面的代码:
#sidebar > h2 { margin-top: 10px; } #sidebar > h2:first-child { margin-top: 0; }
浏览器兼容性
IE6 不支持 :first-child 伪类。根据伪类应用到的设计的不同,它或许不会成为关注的主要问题。比如,如果你使用:first-child 选择器来移除标题或段落上的头部或底部的间距,你的布局在IE6中不会坏掉,它只会看起来有些不同。但是如果你使用:first-child选择器从一个,比如浮动元素,移除左边距或右边距,将会让你的设计乱掉。
语言伪类
语言伪类:lang(),允许你匹配一个基于它的语言的元素。
你如,你想让你的网站的某个特定的链接根据页面的语言有不同的背景颜色:
:lang(en) > a#flag { background-image: url(english.gif); } :lang(fr) > a#flag { background-image: url(french.gif); }
这个选择器将会匹配相关的链接——如果页面的语言等于“en”或“fr”,或者以“en”或“fr”开头并在后面带个连字符“-”的话。
浏览器兼容性
不幸的是,只有IE浏览器中只有IE8支持该选择器,其它的主要浏览器都支持该伪类选择器。
出处:前端观察
责任编辑:bluehearts
上一页 征服高级CSS选择器 [3] 下一页 征服高级CSS选择器 [5]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|