为样式找到目标--CSS选择器

 1.常用选择器

常用的选择器（Selector）包括类型选择器和后代选择器。

1.1类型选择器

类型选择器用来选择特定类型的元素。可以根据三种类型来选择。

1）ID选择器，根据元素ID来选择元素。

前面以”#”号来标志，在样式里面可以这样定义：

#demoDiv{

       color:#FF0000;

}

这里代表id为demoDiv的元素的设置它的字体颜色为红色。

我们在页面上定义一个元素把它的ID定义为demoDiv，如：

<div id="demoDiv">

这个区域字体颜色为红色

</div>

用浏览器浏览，我们可以看到因为区域内的颜色变成了红色

再定义一个区域

<div>

这个区域没有定义颜色

</div>

用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。

2）类选择器 根据类名来选择

前面以”.”来标志，如：

.demoDiv{

              color:#FF0000;

       }

       在HTML中，元素可以定义一个class的属性。

       如：

<div class="demo">

这个区域字体颜色为红色

</div>

同时，我们可以再定义一个元素：

<p class="demo">

这个段落字体颜色为红色

</p>

最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。包          括了页面中的div元素和p元素。

上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。

我们可以改成这样来定义。

<div class="demo">

<div>

这个区域字体颜色为红色

</div>

同时，我们可以再定义一个元素：

<p>

这个段落字体颜色为红色

</p>

</div>

这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。

3）标签选择器 根据标签选择

用标签选择指根据标签名来应用样式，定义时，直接用标签名。如：

div{

              color:#FF0000;

       }

       我们再定义一个元素。

<div>

这个区域字体颜色为红色

</div>

<div>

这个区域字体颜色也为红色

</div>

 

用浏览器浏览，我们发现两个DIV元素都被应用了样式，这里不用定义id，也无需要定义class属性。

示例参见：根据标签来选择元素.html

 

这种选择方式非常的有用，比如你觉得锚链接的下划线不太美观，想把所有的锚链接的样式都设成无下划线形式，颜色为鲜艳的蓝色。可以这样定义。

a{

       text-decoration:none;

       color:#00CCCC;

}

1.2 后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。

 

如：

<style>

.father .child{

       color:#0000CC;

}

</style>

<p class="father">

黑色

       <label class="child">蓝色

              <b>也是蓝色</b>

       </label>

</p>

 

这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。

 

1.3. 伪类

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。

 

a:link{

       color:#999999;

}

a:visited{

       color:#FFFF00;

}

a:hover{

       color:#006600;

}

 

/* IE不支持，用Firefox浏览可以看到效果 */

input:focus{

       background:# E0F1F5;

}

Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。

 

伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。

1.4. 通用选择器

通用选择器用*来表示。例如：

*{

       font-size: 12px;

}

表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。

例如：

p *{

   ……

}

表示所有p元素后代的所有元素都应用这个样式。但是与后代选择器的搭配容易出现浏览器不能解析的情况，比如像这样子：

 

<p>

所有的文本都被定义成红色

<b>所有这个段落里面的子标签都会被定义成蓝色</b>

<p>所有这个段落里面的子标签都会被定义成蓝色</p>

<b>所有这个段落里面的子标签都会被定义成蓝色</b>

<em>所有这个段落里面的子标签都会被定义成蓝色</em>

</p>

 

这个例子里面p标签里面嵌套了一个p标签，这个时候样式可能会出现与预期结果不相同的结果。

1.5. 群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p, td, li {
      line-height:20px;
      color:#c00;
}
#main p, #sider span {
      color:#000;
      line-height:26px;
}
.www_52css_com,#main p span {
      color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
      font-weight:100;
}
　　使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。

2. 子选择器与相邻同胞选择器

子选择器的格式为：

father > child{

       …….

}

 

子选择器与后代选择器非常相像，不同的地方是子选择器只应用于父元素的直接后代，对于直接后代的后代则不应用这个样式。IE不支持子选择器，Firefox才支持这种选择。

例如对于一个导航菜单：

<ul id="nav">

<li>菜单1</li>

<li>菜单2</li>

<ul>

<li>菜单2.1</li>

<li>菜单2.2</li>

</ul>

</ul>

定义样式为：

#nav > li{

       background:url(images/nav_bg.gif) no-repeat;

       color:#FF0000;

}

使用firefox浏览，你可以看到菜单1和菜单2被应用了样式，而菜单2.1和菜单2.2则没有被应用样式。

 

相邻同胞选择器的格式为：

brother1 + brother2{

       …….

}

它表示如果brother2类型前面的元素是brother1，那么brother2类型元素就会应用这个样式。这种选择器的使用比较少。而且IE不支持这种选择器。

 

3. 属性选择器

顾名思义，属性选择器是根据这个属性是否存在和属性的值来选择元素，这是一种非常有用的选择器，但是这种选择器IE6现在还不支持，所以使用的的时候要注意。

3.1 判断属性是否存在。

例如：

abbr[title]{

       color:#FF0000;

}

表示abbr标签是否有title属性，如果则应用这个样式。

3.2 根据属性值来判断

 

p[title='app']{

       color:#FF0000;

}

 

这里所有p标签中，title属性为app的都会应用这个样式。