[教程] CSS3 选择器——基本选择器（一）

CSS3选择器，我想大家并不会陌生吧，因为天天在使用，但对于 CSS3选择器 ，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别，从头一起来看看 CSS3选择器 的运用。


CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器 分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图，如下图：
 



下面我们先看看上表中基本的选择器的使用方法和其所起的作用，为了更好的说明问题，先创建一个简单的DOM结构，如下：

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

复制代码

给这个demo加上一些样式，让他好看一点

1.             .demo {
   
2.                                 width: 300px;
   
3.                                 border: 1px solid #ccc;
   
4.                                 padding: 10px;                        
   
5.                         }
   
6. 
   
7.                          li {
   
8.                                 float: left;
   
9.                                 height: 20px;
   
10.                                 line-height: 20px;
    
11.                                 width: 20px;
    
12.                                 -moz-border-radius: 10px;
    
13.                                 -webkit-border-radius: 10px;
    
14.                                 border-radius: 10px;
    
15.                                 text-align: center;
    
16.                                 background: #f36;
    
17.                                 color: green;
    
18.                                 margin-right: 5px;
    
19.                         }

复制代码

初步效果如下所示：
 



一、通配符选择器（＊）

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

1. *{
   
2.        marigin: 0;
   
3.       padding: 0;

复制代码

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

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

复制代码

效果如下：

 

从上面的效果图看，只要是div.demo下的元素边框都加上了新的样式。所有浏览器支持通配符选择器。

二、元素选择器(E)

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

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

复制代码

所有浏览器支持元素选择器(E)。

三、类选择器（.className）

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

1. <li class="active important items">2</li>

复制代码

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

1. .important {font-weight: bold; color: yellow;}

复制代码

上面代码表示是给有important类名的元素加上一个“字体为粗体，颜色为黄色”的样式，如

 

类选择器还可以结合元素选择器来使用，比如说，你文档中有好多个元素使用了类名“items”，但你只想在p元素这个类名上修改样式，那么你可以这样进行选择并加上相应的样式：

1. p.items {color: red;}

复制代码

上面代码只会匹配class 属性包含important 的所有p 元素，但其他任何类型的元素都不匹配，包括有“items”这个类名的元素，上面也说过了“p.items”只会对p元素并且是其有一个类名叫“items”。不符合这两个条件的都不会被选择。

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

1. .important {font-weight: bold;}

复制代码

正如上面的代码所示，".important.items"这个选择器只对元素中同时包含了"important"和"items"两个类才能起作用，如图所示：

 

有一点大家需要注意，如果一个多类选择器包含的类名中其中有一个不存在，那么这个选择器将无法找到相匹配的元素 比如说下在这句代码，他就无法到找相对应的的元素标签，因为我们列表中只有一个li.first和一个li.last，不存在有一个叫li.first.last的列表项：

1. .first.last {color: blue;}

复制代码

所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被ie6支持。

四、id选择器（#ID）

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#id)

1. #first {background: lime;color: #000;}

复制代码

上在的代码就是选择了id为"first"和"last"的列表项，其效果如下

 

ID选择器有几个地方需要特别注意的，第一：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；第二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；第三，可以在不同的文档中使用相同的id名，比如说在“test.html”中给h1定了“＃important”,也可以给“test1.html”中定义p的id为"#important"，但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。

所有浏览器都支持ID选择器。

那么什么时候采用id命名？什么时候采用类命名呢？我个人认为就是关键的一点就是具有唯一性使用id选择器；公用的，类似的使用类选择器。使用这两个选择器时，最好区别大小写。

五、后代选择器（Ｅ Ｆ）

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

1. .demo li {color: blue;}

复制代码

所有浏览器都支的后代选择器。