CSS选择器详细介绍

CSS3 基本选择器

为了更好的说明问题，先创建一个简单的DOM结构，如下：

<div class="demo"> 
    <ul class="clearfix"> 
       <li id="first" class="first">1</li> 
       <li class="active important">2</li> 
       <li class="important items">3</li> 
       <li class="important">4</li> 
       <li class="items">5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li id="last" class="last">10</li> 
   </ul> 
</div>

一、通配符选择器（＊） 
通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。如：

代码如下:
    *{  marigin: 0;  padding: 0; }
上面代码大家在reset样式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都设置为0，另外一种就是选择某个元素下的所有元素： 

代码如下:

.demo * {border:1px solid blue;}

二、元素选择器(E) 
元素选择器，是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素，如html,body,p,div等等，比如我们这个demo：中元素包括了div,ul,li等。 

代码如下:

li {background-color: grey;color: orange;}

三、类选择器（.className） 
类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在，这样才能选择类，如： 

2

 
共中“active,important, items”就是我们以类给li加上一个类名，以便类选择器能正常工作，从而更好的将类选择器的样式与元素相关联。 

.important {font-weight: bold; color: yellow;} 
上面代码表示是给有important类名的元素加上一个“字体为粗体，颜色为黄色”的样式;

类选择器还有可以具备多类名，上面我们也看到了，我们li元素中同时有两个或多少类名，其中他们以空格隔开，那么选择器也可以使用多类连接在一起，如： 

代码如下:

.important {font-weight: bold;} 
.active {color: green;background: lime;} 
.items {color: #fff;background: #000;} 
.important.items {background:#ccc;} 
.first.last {color: blue;}

正如上面的代码所示，".important.items"这个选择器只对元素中同时包含了"important"和"items"两个类才能起作用. 所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被ie6支持。

五、后代选择器（Ｅ Ｆ）

后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素，比如说:E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，请注意他们之间需要一个空格隔开。这里Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中：

.demo li {color: blue;} 
上面表示的是，选中div.demo中所有的li元素

 

六、子元素选择器(E>F)

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（Ｅ Ｆ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以。
ul > li {background: green;color: yellow;} 
上在代码表示选择ul下的所有子元素li。如： 
IE6不支持子元素选择器。

 

七、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

代码如下:

li + li {background: green;color: yellow; border: 1px solid #ccc;}

上面代码表示选择li的相邻元素li，我们这里一共有十个li，那么上面的代码选择了从第2个li到 10 个li，一共九个 

IE6不支持这个选择器

八、通用兄弟选择器（Ｅ ～ Ｆ）

通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。比如下面的代码：

代码如下:

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

上面的代码所表示的是，选择中了li.active 元素后面的所有兄弟元素li 

 

九、群组选择器（selector1,selector2,...,selectorN）

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。

更多CSS选择器详细介绍相关文章请关注PHP中文网！