大话CSS选择器

       大家都知道DIV+CSS是实现网页布局的一大法宝，它可以实现对网页各个元素的精确定位和布局。那么CSS（样式表）是怎样实现对HTML文档的中元素的样式设置的呢？这就要涉及到一个概念：CSS选择器。

CSS选择器是什么东西呢？ 下面先给大家看一个简单的例子：

/*简单的CSS样式*/

.content{

    color:#FF0000; //将文字标记为红色

}

/*HTML中的内容*/

<div class="content">

这是一个简单的DIV+CSS的Demo

</div>

网页的预览效果是：“这是一个简单的DIV+CSS的Demo”这句话的文字颜色是红色

       通过上面这个最简单的例子我们可以发现：CSS中的样式要想实现对HTML文档中元素的控制，需要某种对应关系（上例中的“Content”就是二者的联系所在），根据这种对应关系（可以是一对一、一对多或者多对多），CSS实现对HTML的样式控制。我们就将这种通过对应关系实现样式控制的东西叫做CSS选择器。

CSS选择器有很多种（随版本的不同而变化），下面我为大家介绍几种最常见的CSS选择器

ID选择器

ID选择器是通过元素的ID来进行选择的，对于同一个HTML页面，每一个元素的ID都是惟一的，所以ID选择器具有唯一性

在样式表中，ID选择器前面以“#”进行标识，下面举例说明

/*ID选择器的CSS样式*/

#content{

    font-size:14px;

}

/*HTML中的内容*/

<div id="content">

这是一个ID选择器的例子

</div>

网页的预览效果是：“这是一个ID选择器的例子”这句话的字体大小是14像素

类选择器

类选择器是通过元素的class属性值来进行选择的，多个元素可以同时具有相同的class属性值，所以它可以实现“一对多”的样式控制。凡是具有相同class属性值的元素都会应用对应的样式。

在样式表中，类选择器前面以“.”进行标识，下面举例说明

/*类选择器的CSS样式*/

.content{

    background:# FF0000 ;  //背景色为红色

}

/*HTML中的内容*/

<div class="content">

这是一个类选择器的例子1

</div>

<div>

下面是一个段落

<p class="content">

这是一个类选择器的例子2

</p>

</div>

网页的预览效果是：“这是一个类选择器的例子1”和“这是一个类选择器的例子2”两句话的背景色是红色的，而“下面是一个段落”这句话没有样式。

标签选择器

标签选择器是通过元素的标签进行选择的。大家都知道HTML页面中的元素都是通过标签进行整合的，具有相同标签的元素就会应用相同的样式

在样式表中，标签选择器的前面什么都不用加，只需写出标签名即可，下面举例说明

/*标签选择器的CSS样式*/

p{

    color:blue ; 

    fontsize-12px;

}

/*HTML中的内容*/

<p>段落1</p>

<div class="example">

下面是一个段落

<p>段落2</p>

</div>

网页的预览效果是：“段落1”和“段落2”两句话的字体是蓝色的，大小是12像素；“下面是一个段落”这句话没有任何样式

伪类选择器

最常用的伪类选择器就是对连接标签<a>应用的选择器，下面举例说明

/*伪类选择器的CSS样式*/

a:link{text-decoration:none;}

a:visited{text-decoration:none;}

a:hover{text-decoration:underline;}

/*HTML中的内容*/

<a href="http://www.baidu.com" target="_blank">连接到百度</a>

网页的预览效果是：连接默认没有下划线，当鼠标悬停时有下滑下，访问过后没有下划线

属性选择器

属性选择器是根据特定标签的特定属性值或者是属性的有无来进行选择的，举例如下

/*属性选择器的CSS样式*/

p[title]{font-size=14px;}

或者

p[title="123"]{ font-size=18;}

如果<p>标签有“title”属性，则将该段设为字体14像素；如果<p>标签的“title”属性值为“123”，则将该段设为字体18像素

后代选择器

后代选择器是通过指定父代的所有指定后代（包括直接后代和深层次后代）进行选择的，它通常由两个常用标签组合形成。通过使用后代选择器，可以实现更精确的样式控制，是非常常用的一种CSS选择器。

父选择器和后代选择器之间以空格分隔，下面举例说明：

/*后代选择器的CSS样式*/

.father p{

    color:blue;

}

/*HTML中的内容*/

<div class="father">

这是父元素

<p>

这是子元素

</p>

</div>

网页的预览效果是：" 这是父元素 "这句话没有样式，而“这是子元素”这句话的字体颜色是蓝色

子选择器

子选择器与后代选择器非常类似，他们的区别是：后代选择器将样式用到父元素的所有后代当中（包括直接后代和深层次后代），而子选择器只将样式用到父元素的直接后代元素，只有“儿子”能用到、“孙子”以及“重孙子”用不到。

父选择器和子选择器之间以“>”分隔，下面举例说明

/*子选择器的CSS样式*/

.father>.son{

    background:blue;

}

/*HTML中的内容*/

<div class="father">

    <div class="son">

    这是子元素

        <div class="son">

        这是孙子元素

        </div>

    </div>

</div>

网页的预览效果是："这是子元素"这句话的背景色是蓝色的；“这是孙子元素”这句话的背景色是白色的（没有样式）

如果将“>”改为空格 即 “”.father .son"，则两句话的背景色都是蓝色的。

通用选择器

通用选择器即应用于所有标签的选择器，用“*”表示，举例如下：

/*通用择器的CSS样式*/

*{

    margin：0；

    padding：0；

}

将所有“盒子”的外边距和内边距都设为0，这句话通常用在CSS样式表的开头，用作初始化。

希望这篇文章能对初学DIV+CSS的朋友们有所帮助