那么从现在开始，让我们抛开它们版本之间的差异，从头开始看看CSS选择器的使用。
CSS是一种用于在屏幕上渲染html、xml等的语言。 CSS主要是把样式应用到对应的元素上来渲染相对应用的元素，所以我们选择对应的元素非常重要。 如何选择对应的元素，这个时候就需要我们所说的选择器。 选择器主要用于确定html树结构中的DOM元素节点。 我把CSS选择器分为三个部分，第一部分是我们常用的部分，我称之为基本选择器； 第二部分我把他比作一个属性选择器，第三部分我把他比作一个伪类选择器，这部分也是最难理解和掌握的。 明天我们先看第一部分——基本选择器。我们先看一个常用的选择器列表图
接下来我们看看上表中基本选择器的使用以及它们的作用。 为了更好的说明问题，首先创建一个简单的DOM结构，如下：
复制代码
代码如下所示：
为这个演示添加一些样式，使其看起来更好
复制代码
代码如下所示：
.演示{
宽度：300px；
边框：1pxsolid#ccc；
内边距：10px；
李{
向左飘浮;
高度：20px；
行高：20px；
宽度：20px；
-moz-边框半径：10px；
-webkit边框半径：10px；
边框半径：10px；
文本对齐：居中；
背景：#f36；
颜色：绿色；
右边距：5px；
初步结果如下：
1. 通配符选择器 (*)
转义选择器用于选择所有元素，也可以选择某个元素下的所有元素。 喜欢：
复制代码
代码如下所示：
*{
保证金：0；
填充：0；
你一定在重置样式文件中看到过很多代码。 他说的就是把所有元素的margin和padding都设置为0，另外就是选择某个元素下的所有元素：
复制代码
代码如下所示：
.demo*{边框：1pxsolidblue;}
疗效如下；
从里面的效果图来看，只要给div.demo下的元素边框添加新的样式就可以了。 所有浏览器都支持键值选择器。
2. 元素选择器（E）
元素选择器是CSS选择器中最常见、最基础的选择器。 虽然元素选择器是文档的元素，例如html、body、p、div等，但是例如我们的demo中的元素包括div、ul、li等。
复制代码
代码如下所示：
li{背景颜色：灰色；颜色：橙色；}
在代表选择页面的li元素上css3新增选择器，设置背景颜色和前视图，效果如下：
所有浏览器都支持元素选择器 (E)。
3. 类选择器（.className）
类选择器是以独立于文档元素的形式指定样式。 在使用类选择器之前，您需要在 html 元素上定义类名。 换句话说，你需要确保类名存在于html标签中，以便你可以选择该类，例如：
总的“active, important, items”意味着我们给li加上了一个类名，这样类选择器才能正常工作，所以最好将类选择器的样式与元素关联起来。
.重要{字体粗细：粗体；颜色：黄色；}
里面的代码表示给一个重要类名的元素添加“字体为宋体，颜色为白色”的样式，如
类选择器也可以与元素选择器结合使用。 例如，你的文档中有很多元素使用类名“items”，但你只想更改 p 元素的类名上的样式，因此你可以像这样选择并添加相应的样式：
p.items{颜色：红色;}
里面的代码只会匹配类属性包含 important 的所有 p 元素，但不会匹配任何其他类型的元素，包括类名为“items”的元素。 还据说“p.items”只会匹配p元素并且它有一个名为“items”的类。 不符合这两个条件的，将不会被选中。
类选择器也可以有多个类名，我们之前已经看到，我们的 li 元素中同时存在两个或多个类名，并且它们之间用空格分隔，所以选择器也可以使用多个类连接在一起，比如作为 ：
复制代码
代码如下所示：
.重要{字体粗细：粗体;}
.active{颜色：绿色；背景：石灰；}
.items{颜色：#fff;背景：#000;}
.important.items{背景:#ccc;}
.first.last{颜色:蓝色;}
如前面的代码所示，“.important.items”选择器仅适用于同时包含“important”和“items”类的元素，如图所示：
需要注意的一件事是，如果多类选择器中包含的类名之一不存在，选择器将很难找到匹配的元素。 比如下面的代码中，他将无法找到对应的元素标签，因为我们的列表中只有一个li.first和一个li.last，所以不存在名为li.first.last的列表项：
复制代码
代码如下所示：
.first.last{颜色:蓝色;}
所有浏览器都支持类选择器，但 ie6 不支持多类选择器（.className1.className2）。
四、id选择器（#ID）
ID选择器与上面提到的类选择器非常相似。 在使用ID选择器之前，需要在html文档中添加ID名称，以便在样式选择器中找到对应的元素。 区别在于 ID 选择器是页面中的唯一值。 当我们使用类时，我们添加一个“.” (.className) 对应的类名前，而 id 选择器在名称前使用“#”，如 (#id) ，
复制代码
代码如下所示：
#第一{背景：石灰；颜色：#000；}
#last{背景：#000;颜色：石灰;}
上面的代码是选择id为“first”和“last”的列表项，效果如下
ID选择器有几个地方需要注意。 第一：文档中的id选择器只允许使用一次，因为id在页面中是唯一的； 第二，id选择器不能和类选择器一样多组合使用，一个元素只能用一个id名来命名； 第三，不同的文档中可以使用相同的id名称，例如，如果在“test.html”中为h1设置“#important”，则也可以给“test1.html”，p的id定义为“ #important”，但前提是test.html或test1.html中只允许有一个名为“#important”的id。
所有浏览器都支持 ID 选择器。
那么id是什么时候命名的呢？ 什么时候使用类命名？ 我个人认为关键是要使用具有唯一性的id选择器； 对于公共，类选择器的类似使用。 使用这两个选择器时，最好区分大小写。
5. 后代选择器（EF）
后代选择器也称为包含选择器，其作用是选择一个元素的后代元素，例如：EF，上面的E是祖先元素，F是后代元素，也就是说E元素的所有后代都是选择F元素，请注意需要用空格分隔。 这里F无论是E元素的子元素还是孙子元素或者更深层次的关系都会被选择。 也就是说，无论F在E中有多少层关系，它都会被选择：
.demol{颜色：蓝色;}
表示div.demo中所有li元素都被选中
所有浏览器都支持的后代选择器。
6.子元素选择器(E>F)
子元素选择器只能选择一个元素的子元素，其中E为父元素，F为子元素，其中E>F表示选择E元素下的所有子元素F。 这与后代选择器 (EF) 不同，其中 F 是 E 的后代，而子选择器 E>F，其中 F 只是 E 的子级。
ul>li{背景：绿色；颜色：黄色；}
上面的代码表示选择ul下的所有子元素li。 喜欢：
IE6 不支持子元素选择器。
7. 相邻兄弟元素选择器（E+F）
相邻兄弟选择器可以选择紧接在另一个元素之后的元素，但它们具有相同的父元素，换句话说，EF的两个元素具有相同的父元素，但F元素在E元素前面，并且Adjacent使得我们可以使用相邻同级选择器来选择 F 元素。
复制代码
代码如下所示：
li+li{背景:绿色;颜色:黄色;边框:1pxsolid#ccc;}
里面的代码意思是选择li的相邻元素li。 我们这里一共有十里，所以里面的代码选择从第二里到第十里，一共九里，请看效果：
因为里面的li+li，第二个li是第一个li的相邻元素，第三个是第二个相邻元素，所以第三个也被选中，以此类推，所以前九个li都是选了，如果我们换一种形式来看，可能会更好理解：
复制代码
代码如下所示：
.active+li{背景：绿色；颜色：黄色；边框：1pxsolid#ccc；}
根据上面的知识，这段代码显然是选择了与li.active相邻的li元素，并且注意到与li.active相邻的相邻元素只有一个。 如图所示：
IE6不支持该选择器
8. 通用同级选择器（E~F）
通用同级元素选择器是CSS3新增的选择器。 这些选择器将选择元素前面的所有同级元素。 它们也与相邻的同级元素相似，并且需要位于同一父元素中。 也就是说，E和F元素属于同一个父元素，但F元素在E元素之后，所以E~F选择器会选择E元素前面的所有F元素。 例如下面的代码：
复制代码
代码如下所示：
.active~li{背景：绿色；颜色：黄色；边框：1pxsolid#ccc；}
里面的代码意思是选择li.active元素前面的所有同级元素li，如图：
一般兄弟选择器与相邻兄弟选择器非常相似，只不过相邻兄弟选择器只选择与其前面仅与其相邻的元素（只选择一个元素）； 而一般的兄弟元素选择器css3新增选择器，选择的是与该元素相邻的前一个兄弟元素。 这么说可能会让人困惑，大家可以仔细看看它相邻兄弟的疗效图。
IE6 不支持使用这些选择器。
九、组选择器（selector1、selector2、...、selectorN）
分组选择器是将具有相同样式的元素分组在一起，每个选择器之间用冒号“,”分隔，如前面的selector1、selector2、...、selectorN。 这个逗号告诉浏览器该规则包含多个不同的选择器。 如果没有逗号，表达的意思就会完全不同。 省略逗号将成为我们上面提到的后代选择器。 使用时一定要小心、注意这一点。 让我们看一个简单的例子：
复制代码
代码如下所示：
.first,.last{背景:绿色;颜色:黄色;边框:1pxsolid#ccc;}
由于 li.first 和 li.last 具有相同的模式效果，因此我们将它们分组在一起：
所有浏览器都支持组选择器。
这九个选择器是CSS3中的基本选择器，最常用的是元素选择器、类选择器、ID选择器、后代选择器、组选择器，在实际应用中你可以将这些选择器组合使用来达到目的。 那么关于CSS3选择器的第一部分——基本选择器就介绍到这里了，有点简单，希望对刚接触CSS的朋友有所帮助，下一节将介绍CSS3选择器的第二部分——属性选择如果你有兴趣的请关注本站的更新。
发表评论