CSS3中的选择器

CSS3选择器是在CSS2.1选择器的基础上新增了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，使编写的过程更加轻松。

根据所获取页面中的元素的不同，可以把CSS选择器分成五大类：

基本选择器
组合选择器
伪类选择器
伪元素
属性选择器

在这其中伪类选择器又分成了六类：

动态伪类选择器
目标伪类选择器
语言伪类
UI元素状态伪类选择器
结构伪类选择器
否定伪类选择器

接下来依次介绍：

一、基本选择器：

　　　　1.标签选择器

　　　　　　标签选择器直接引用HTML标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中默认的显示样式。因此，标签选择器可以快速、方便的控制页面标签的默认显示效果。

　　　　【示例】通过标签选择器，统一定义网页中段落文本的样式为：段落内文本字体大小为12px，字体的颜色为红色。

<style type="text/css">
    p{
        font-size: 12px;
        color: red;
    }
</style>

　　　　　在定制网页样式时可以利用标签选择器设计网页元素默认效果，或者统一常用元素的基本样式。标签选择器在CSS中是使用频率最高的一类选择器，且容易管理，因为它们都是和网页元素同名的。

（1）、类选择器：

　　　　　　类选择器能够为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式。类选择器以一个点(.)前缀开头，然后跟随一个自定义的类名。

　　　　　　应用类样式可以使用class属性来实现，HTML所有元素都支持该属性，只要在标签中定义class属性，然后把该属性值设置为事先定义好的类选择器的名称就OK了。

　　　　　　【示例1】利用类选择器为页面中的3个相邻的段落文本对象定义不同的样式，其中第1和3段文本的字体大小为12px、字体红色，第2段文本的字体大小为18px、字体为红色。

　　　　　　第一步：启动Dreamweaver，新建一个网页，在<body>标签中输入三段文本。

<p>问君能有几多愁，恰似一江春水向东流</p>
<p>剪不断，理还乱，是离愁。别是一般滋味在心头</p>
<p>独自莫凭栏，无限江山，别是容易见时难。流水落花春也去，天上人间</p>

　　　　　　第二步：在<head>标签中添加<style type="text/css">标签，定义一个内部样式表。

　　　　　　第三步：通过标签选择器为所有段落文本的字体大小定义为12px，字体颜色为红色。

<style type="text/css">
    p{
        font-size: 12px;  /*字体大小为12像素*/
        color: red;  /*字体颜色为红色*/
    }
</style>

　　　　　　第四步：如果仅定义第2段文本的字体大小为18px，这个时候就可以用到类选择器。在这里先定义一个18px大小的字体类：

.font18px{font-size: 18px;}

　　　　　　第五步：在第二段段落标签中引用font18px类样式。

<p>问君能有几多愁，恰似一江春水向东流</p>
<p class="font18px">剪不断，理还乱，是离愁。别是一般滋味在心头</p>
<p>独自莫凭栏，无限江山，别是容易见时难。流水落花春也去，天上人间</p>

　　　　　　最终在浏览器中显示的样式为：

　　　　　　【示例2】如何在对象中应用多个样式类。class属性可以包含多个类，因此可以设计复合样式类。

　　　　　　　第一步：复制上面示例的文档，并在内部样式表中定义了3个类：font18px、underline、italic

　　　　　　　第二步：然后在段落文本中分别引用这些类，其中第二段文本标签引用了3个类，第三段引用了一个类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{  /*段落默认样式*/
            font-size: 12px;  /*字体大小为12像素*/
            color: red;  /*字体颜色为红色*/
        }
        .font18px{  /*字体大小类*/
            font-size: 18px;
        }
        .underline{  /*下划线类*/
            text-decoration: underline;
        }
        .italic{  /*斜体类*/
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="underline">问君能有几多愁，恰似一江春水向东流</p>
    <p class="font18px underline italic">剪不断，理还乱，是离愁。别是一般滋味在心头</p>
    <p class="italic">独自莫凭栏，无限江山，别是容易见时难。流水落花春也去，天上人间</p>
</body>
</html>

　　　　　　如果把标签和类捆绑在一起来定义选择器，则可以限定类的使用范围，这样就可以指定该类仅适用于特定的标签范围内，这种方法也称为指定类选择器。

（2）、ID选择器：

　　　　　　ID选择器以井号(#)作为前缀，然后是一个定义的ID名。应用ID选择器可以使用id属性来实现，HTML所有元素都支持该属性，只要标签中定义id属性，然后把该属性值设置为事先定义好的ID选择器的名称即可。

　　　　　　　【示例1】演示如何在文档中设置ID样式。

　　　　　　　　第一步：启动Dreamweaver，新建一个网页，在<body>标签内输入<div>标签，定义一个盒子:

<div id="box">问君能有几多愁，恰似一江春水向东流</div>

　　　　　　　　第二步：在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后为该盒子定义固定的宽和高，并设置背景图像，以及边框和内边距大小。

<style type="text/css">
    #box{
        background: url("./images/leaves.png") center bottom;
        height: 200px;
        width: 400px;
        border: solid 2px red;
        padding: 100px;
    }
</style>

　　　　　　　在浏览器中的效果：

　　　　　　　　也可以为ID选择器指定标签范围。采用这种方法能够提高该样式的优先级。

　　　　　　　　【示例2】针对上面的示例。可以在ID选择器前面增加一个div标签，这样div#box选择器的优先级会大于#box选择器的优先级。在同等条件下，浏览器会优先解析div#box选择器定义的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div#box{
            background: url("./images/leaves.png") center bottom;
            height: 200px;
            width: 400px;
            border: solid 2px red;
            padding: 100px;
        }
    </style>
</head>
<body>
    <div id="box">问君能有几多愁，恰似一江春水向东流</div>
</body>
</html>

　　　　　　提示！！！

　　　　　　　　　　一般通过ID选择器来定义HTML款架结构的布局效果，因为HTML框架元素的ID值都是唯一的。

（3）、通配选择器

　　　　　　如果HTML所有元素都需要定义相同的样式，这个时候就可以用到通配选择器，它是固定的，用星号（*）表示。

　　　　　　【示例】针对上面示例中清除边距样式

*{
    margin: 0;
    padding: 0;
}

二、组合选择器

（1）、包含选择器

　　　　　　包含选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器。

　　　　　　【示例】如何使用包含选择器为不同层次下的标签定义样式。

　　　　　　第一步：启动Dreamweaver，新建一个网页，在<body>标签中输入如下结构。

<div id="wrap">
    <div id="header">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div id="main">
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
</div>

　　　　　　第二步：在<head>标签中添加<style type="text/css">标签，定义一个内部样式表。然后定义样式，希望实现1、定义<div id="header">包含框内的段落文本字体大小为14px。2、定义<div id="main">包含框内的段落文本字体大小为12px。

　　　　　　第三步：这个时候就可以利用包含选择器来快速定义了：

    <style type="text/css">
        #header p{
            font-size: 14px;
        }
        #main p{
            font-size: 12px;
        }
    </style>

　　　　　　【示例2】针对上面的结构，用户也可以使用子选择器来定义他们的样式。

    <style type="text/css">
        #header > p{
            font-size: 14px;
        }
        #main > p{
            font-size: 12px;
        }
    </style>

　　　　　　【示例3】要是页面的结构比较复杂的话，所包含的元素就不止子元素了，这个时候就只能使用包含选择器了

<body>
    <div id="wrap">
        <div id="header">
            <h2>
                <p>第一段文本</p>
            </h2>
            <p>第二段文本</p>
        </div>
        <div id="main">
            <div>
                <p>第三段文本</p>
                <p>第四段文本</p>
            </div>
            <p>主题文本</p>
        </div>
    </div>
</body>

（2）、子选择器

　　　　　　子选择器是指定父元素所包含的子元素。子选择器使用尖角号（>）表示