前面我们一起了解过CSS3新增的一些属性选择器,今天我们就接着来看看另一大类选择器——伪类选择器,相对于可以自行命名的类选择器,伪类选择器是固定的,也就是默认已定义好的选择器,不可随便起名,比如我们常会用到的a:hover里的:hover伪类选择器。伪类选择器又分结构性伪类选择器和状态伪类选择器。下面我们先来看看CSS3的一些相当有用的结构性伪类选择器吧。
:root 选择器。根元素,HTML文档的根元素(or称最顶层元素),即。
:not选择器。譬如想对某个结构元素内的元素使用一种样式,但是又想排除这个元素下面的某个子元素,让它不使用此样式,可以使用:not。
:empty选择器。可规定当某元素内容为空白的时候,使用其所定义的样式。
:target选择器。使用此选择器来对页面中的target元素(该元素的ID被当作超链接对象)指定样式,该样式只在用户点击了对应的超链接,并跳转到target元素后起作用。
以上是四个最基本的结构性伪类选择器,咱们放在一起看示例:
* {margin:0; padding:0; line-height:30px;}
:root {background:#eee;}/*:root选择器定义样式*/
#demo *:not(h1) {background:#ff0; margin:5px 0; border-bottom:1px solid #f00;}
:empty {width:300px; height:50px; background:#999;}/*定义元素内容为空时的样式*/
:target {background:#000; color:#fff;}/*定义target元素的样式*/
a {padding:0 20px 0 0;}
CCJK本地化官方博客
我们提供专业的网站开发、翻译本地化、网络推广一站式解决方案
CCJK提供专业的多语种翻译,网站开发,翻译本地化,网络推广以及elearning等一站式解决方案。
-
-
我的ID为“no1”
-
-
-
我的ID为“no2”
我有两行内容。
-
-
-
我的ID为“no3”
我有三行内容。
我有三行内容。
-
大家可以将此代码另存后查看对应的选择器用法哈。