CSS3 选择器——基本选择器

我就是我 2022-06-10 05:24 461阅读 0赞

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

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

![css3-selector-lest.png][]

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

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

.demo { width: 300px; border: 1px solid #ccc; padding: 10px; }
    
     			li { float: left; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; }

初步效果如下所示：

![css3-selector-status.png][]

#### 一、通配符选择器（＊） ####

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

*{ marigin: 0; padding: 0; }

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

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

效果如下；

![css3-selector-tp.png][]

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

#### 二、元素选择器(E) ####

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

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

上在表示选择页面的li元素，并设置了背景色和前景色，效果如下：

![css3-selector-e.png][]

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

#### 三、类选择器（.className） ####

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

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

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

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

![css3-selector-classname.png][]

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

p.items { color: red;}

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

类选择器还有可以具备多类名，上面我们也看到了，我们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"两个类才能起作用，如图所示：

![css-select-calssName-2.png][]

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

.first.last { color: blue;}

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

#### 四、id选择器（\#ID） ####

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

#first { background: lime;color: #000;}
    			#last { background: #000;color: lime;}

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

![css-select-id.png][]

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元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中：

.demo li { color: blue;}

上面表示的是，选中div.demo中所有的li元素

![css3-selector-ef.png][]

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

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

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（Ｅ Ｆ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以。

ul > li { background: green;color: yellow;}

上在代码表示选择ul下的所有子元素li。如：

![css3-selector-chirld.png][]

IE6不支持子元素选择器。

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

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

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

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

![css-selector-xl.png][]

因为上面的li+li其中第二li是第一li的相邻元素，第三个又是第二个相邻元素，因此第三个也被选择，依此类推，所以后面九个li都被选中了，如果我们换过一种方式来看，可能会更好的理解一点：

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

按照前面所讲的知识，这句代码很明显选择了li.active后面相邻的li元素，注意了和li.active后面相邻的元素仅只有一个的。如图：

![css3-selector-next.png][]

IE6不支持这个选择器

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

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

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

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

![css3-selector-tongyong.png][]

通用兄弟选择器和相邻兄弟选择器极其相似，只不过，相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素（选中的仅一个元素）；而通用兄弟元素选择器，选中的是元素相邻的后面兄弟元素，这样说起来可能会有迷糊，大家可以仔细看看其相邻兄弟的效果图。

IE6不支持这种选择器的用法。

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

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

.first, .last { background: green;color: yellow; border: 1px solid #ccc;}

因为li.first和li.last具有相同的样式效果，所以我们把他们写到一个组里来：

![css3-selector-group.png][]

所有浏览器都支持群组选择器。

上面九种选择器是CSS3中的基本选择器，而我们最常用的是元素选择器、类选择器、ID选择器、后代选择器、群组选择器，同时大家可以在实际应用中把这些选择器结合起来使用，达到目的就行了。那么关于CSS3选择器的第一部分——基本选择器就介绍到这里，有点简单，希望对初次接触CSS的同学有所帮助，下节将介绍CSS3选择器的第二部分——属性选择器，感兴趣的朋友请观注本站的更新。

如需转载烦请注明出处：[W3CPLUS][]

著作权归作者所有。  
商业转载请联系作者获得授权,非商业转载请注明出处。  
原文:  [http://www.w3cplus.com/css3/basic-selectors][http_www.w3cplus.com_css3_basic-selectors]  ©  [w3cplus.com][W3CPLUS]

[CSS]: http://www.w3.org/TR/css3-selectors/
[css3-selector-lest.png]: /images/20220610/df763886fd1b40c0af4b71ce61d5a79f.png
[css3-selector-status.png]: /images/20220610/db40fd84c5384adbbdd2146cad6439df.png
[css3-selector-tp.png]: /images/20220610/5d386c9e0c23432baca80176a6307f60.png
[css3-selector-e.png]: /images/20220610/cf60cde8a88143afa49ba62baa770c5c.png
[css3-selector-classname.png]: /images/20220610/23ad88997c7e416c9c282ac7da97f7fd.png
[css-select-calssName-2.png]: /images/20220610/e35de918240d46bb973ce1da2fc2a7e5.png
[css-select-id.png]: /images/20220610/17ddba43c18342b9a014d6954a003d2a.png
[css3-selector-ef.png]: /images/20220610/f81a197a05654cd6a78a4023c012a921.png
[css3-selector-chirld.png]: /images/20220610/510f4360a62e4339953976ae4e966554.png
[css-selector-xl.png]: /images/20220610/44574ee3ba5e4f22adf602c55d6fb8ce.png
[css3-selector-next.png]: /images/20220610/95a0dfdd37c04b2089bbb36cfc0858bb.png
[css3-selector-tongyong.png]: /images/20220610/cff06d7c7e914ae0a8e4d971087c7e68.png
[css3-selector-group.png]: /images/20220610/99da0ad2272e40ad922ae3927e0c7bf9.png
[W3CPLUS]: http://www.w3cplus.com/
[http_www.w3cplus.com_css3_basic-selectors]: http://www.w3cplus.com/css3/basic-selectors