CSS3 基本选择器

 

*E.class
#idEFE>F
E+FE[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 F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:

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

 

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

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

 

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

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

代码如下:

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


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

IE6不支持这个选择器

八、通用兄弟选择器(E ~ F)

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

代码如下:

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


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

 

九、群组选择器(selector1,selector2,...,selectorN)

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

驾驶式洗地机