前面我们一起了解过CSS3新增的一些属性选择器,今天我们就接着来看看另一大类选择器——伪类选择器,相对于可以自行命名的类选择器,伪类选择器是固定的,也就是默认已定义好的选择器,不可随便起名,比如我们常会用到的a:hover里的:hover伪类选择器。伪类选择器又分结构性伪类选择器和状态伪类选择器。下面我们先来看看CSS3的一些相当有用的结构性伪类选择器吧。

:root 选择器。根元素,HTML文档的根元素(or称最顶层元素),即。

:not选择器。譬如想对某个结构元素内的元素使用一种样式,但是又想排除这个元素下面的某个子元素,让它不使用此样式,可以使用:not

:empty选择器。可规定当某元素内容为空白的时候,使用其所定义的样式。

:target选择器。使用此选择器来对页面中的target元素(该元素的ID被当作超链接对象)指定样式,该样式只在用户点击了对应的超链接,并跳转到target元素后起作用。

以上是四个最基本的结构性伪类选择器,咱们放在一起看示例:

 

 

CCJK本地化官方博客

我们提供专业的网站开发、翻译本地化、网络推广一站式解决方案

CCJK提供专业的多语种翻译,网站开发,翻译本地化,网络推广以及elearning等一站式解决方案。

请依次点击查看下面对应列表效果:NO.1NO.2NO.3
    • 我的ID“no1”

    • 我的ID“no2”

      我有两行内容。

    • 我的ID“no3”

      我有三行内容。

      我有三行内容。

大家可以将此代码另存后查看对应的选择器用法哈。