CSS3 基本选择器

 

CSS3 基本选择器

 

*	E	.class
#id	EF	E>F
E+F	E[attribute]	E[attribute=value]
E[attribute~=value]	E[attribute | = value]	:first-child
E[attribute^=value]	E[attribute$=value]	E[attribute*=value]
:lang()	:before	:after
:first-letter	::before	::after
::first-letter	:first-line	::first-line
E~F	:root	:last-child
:only-child	:nth-child()	:nth-last-child()
:first-of-type	:last-of-type	:only-of-type
:nth-of-type()	:nth-last-of-tyle()	:empty
:not()	:target	:enable
:disabled	:checked

为了更好的说明问题，先创建一个简单的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标记中存在，这样才能选择类，如：

<li class="active important items">2</li>
共中“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。这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。我们来看一个简单的例子：

 

代码如下:

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
因为li.first和li.last具有相同的样式效果,所以我们把他们写到一个组里来.