Blog

四个基本的结构性伪类选择器

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

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

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

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

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

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

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS3结构性伪类选择器——CCJK本地化官方博客</title>

<style type="text/css">

* {margin:0; padding:0; line-height:30px;}

:root {background:#eee;}/*:root选择器定义<html>样式*/

#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;}

</style>

</head>

<body>

<div id="demo">

<h1>CCJK本地化官方博客</h1>

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

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

</div>

<div></div><!--div内容为空-->

<div>请依次点击查看下面对应列表效果:<a href="#no1">NO.1</a><a href="#no2">NO.2</a><a href="#no3">NO.3</a></div>

<ul>

<li id="no1">

<h3>我的ID"no1"</h3>

</li>

<li id="no2">

<h3>我的ID"no2" </h3>

<p>我有两行内容。</p>

</li>

<li id="no3">

<h3>我的ID"no3"</h3>

<p>我有三行内容。</p>

<p>我有三行内容。</p>

</li>

</ul>

</body>

</html>

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

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP