第一章：第二课 选择器-结构性伪类选择器[一]


本节来学习一下CSS 3.0中的结构性伪类选择器，在这之前，先来简单的回顾一下CSS 2.0中的类和伪类选择器，我们知道在CSS中，可以使用类选择器把相同的元素定义成不同的样式，譬如针对一个p元素，我们可以做如下定义：

p.left{color:#900;}
p.right{color:#090;}


然后在HTML中对p使用class属性，如下：

<p class="left">前端开发网(W3Cfuns.com)</p>
<p class="right">web前端开发起飞区</p>


在CSS中除了上面所属的类选择器之外，还有伪类选择器，这种选择器与类选择器的区别是，类选择器可以随便起名，而伪类选择器是固定的，也就是默认已定义好的选择器，不可随便起名。比如超链接的Hover伪类。

CSS3.0 四个最基本的结构性伪类选择器

:root 选择器
　　此选择器将绑定到页面的根元素中，所谓根元素，是指文档树中最顶层的元素，也就是<html>部分。

  
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        :root{background:#900;}
        #box{height:100px; background:#090;}
        </style>
    </head>
    <body>
            <div id="box"></div>
    </body>
</html>
:not选择器
　　如果想对某个结构元素使用样式，但是又想排除这个个元素下面的某个子元素，让它不使用此样式，可以使用它，看例子：
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        #box *:not(h1){color:#900; font-weight:700;}
        </style>
    </head>
    
    <body>
            <div id="box">
                <h1>前端开发网(W3Cfuns.com)</h1>
                <p>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</p>
        </div>
    </body>
</html>
:empty选择器
　　当元素内容为空白的时候，使用其所定义的样式，案例如下：
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        :empty{width:200px; height:200px; background:#008000;}
        </style>
    </head>
    
    <body>
            <div id="box"></div>
    </body>
</html>
:target选择器
　　使用其选择器来对页面中的target元素（该元素的ID被当作页面中的超链接）指定的样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用，案例如下：
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        :target{font-weight:700; color:#fff; background:#900;}
        </style>
    </head>
    
    <body>
        <p><a href="#box1">第一个</a> <a href="#box2">第二个</a> <a href="#box3">第三个</a> <a href="#box4">第四个</a></p>
        <div id="box1">
            <h1>第一个：前端开发网</h1>
            <p>web前端开发起飞区</p>
        </div>
        <div id="box2">
            <h1>第二个：前端开发网</h1>
            <p>web前端开发起飞区</p>
        </div>
        <div id="box3">
            <h1>第三个：前端开发网</h1>
            <p>web前端开发起飞区</p>
        </div>
        <div id="box4">
            <h1>第四个：前端开发网</h1>
            <p>web前端开发起飞区</p>
        </div>
    </body>
</html>

思考：我要造反
　　:target这个结构性伪类选择器比较方便，大家可以试着使用它做一个滑动门的效果，可以在“CSS3实现 带有记忆功能的多页面跳转导航菜单”帖子中找到，并且可以实现无JS的《带有记忆功能的多页面跳转导航菜单》。



posted @ 2012-02-22 22:24  YouDoce  阅读(278)  评论(0)  编辑  收藏  举报