CSS选择器

1.常用选择器
常用的选择器有类型选择器和后代选择器。
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的都会应用这个样式。