html5出现了哪些选择器,CSS，CSS3都有哪些选择器？CSS选择器详细讲解（上）

CSS 1.0~3.0选择器(上)

HTML5学堂：我们学过了最为基础的id，类名和标签名选择器，然后就一直用它们了吗？如果是这样，那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅，将CSS1.0版本至当前最新的3.0版本当中，存在的所有选择器讲解一遍，今天我们先来说说比较基础的选择器。

通配符选择器

基本语法

*

* {

margin: 0;

padding: 0;

}

HTML5学堂的一些提醒：

对于初学者，在学习更多高级选择器之前，最先了解的选择器。

星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用，但建议永远不要使用它，它会给浏览器带来大量不必要的负担。我们通常通过reset文件进行样式的重置。

此外，* 也能作为子选择符使用。

#h5course * {

border: 1px solid black;

}

这将匹配#h5course的每一个后代元素。

兼容性

IE6+

Firefox

Chrome

Safari

Opera

id选择器

基本语法

#X

#h5course {

width: 960px;

margin: auto;

}

HTML5学堂的一些提醒：

#号前缀允许我们通过id选择标签。这是最常见的用法，不过应该慎重使用ID选择器。

id选择符是唯一的，不允许重复使用。如果可能的话，先尝试使用一个标签名称，一个新的HTML5元素，甚至是一个伪类。

兼容性

IE6+

Firefox

Chrome

Safari

Opera

类名选择器

基本语法

.X

.h5course {

width: 960px;

margin: auto;

}

HTML5学堂的一些提醒：

id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符，当需要给特殊元素应用样式的时候才使用id。

通常设置id，往往与JS相关~

兼容性

IE6+

Firefox

Chrome

Safari

Opera

标签名选择器

基本语法

X

div {

width: 960px;

margin: auto;

}

HTML5学堂的一些提醒：

如果你想根据页面元素的类型，而不是id或类名，匹配到页面上的相应元素，那么可以使用标签名选择器，但是很不建议单独使用标签名选择器进行样式控制，原因很简单——选择范围太广，容易对其他元素造成影响。

兼容性

IE6+

Firefox

Chrome

Safari

Opera

后代选择器

基本语法

X Y

.h5course div {

width: 960px;

margin: auto;

}

HTML5学堂的一些提醒：

当你需要给你的选择符增加特殊性的时候，可以使用。例如，如果你只想匹配类名为h5course下的div元素？此时后代选择符派上用场。

如果你的选择符看起来像这样 X Y Z A B.error，那你就错了，并非一味的后代就是合理的~时常问问自己，是否有必要这么做~

兼容性

IE6+

Firefox

Chrome

Safari

Opera

欢迎沟通交流~HTML5学堂

伪类选择器

基本语法

X:visited and X:link

a:link {

color: red;

}

a:hover {

color: purple;

}

HTML5学堂的一些提醒：

比较经典的伪类选择器有四种，分别是hover、link、active、visited。最初伪类选择器只能应用于a标签，从IE7之后，其他浏览器也支持其他标签的伪类效果了。可以把伪类理解为一种标签的状态。如，a:hover表示的就是当鼠标悬停在a标签上时的效果。

兼容性

IE7+

Firefox

Chrome

Safari

Opera

相邻选择器

基本语法

X + Y

ul + .h5course {

color: red;

}

HTML5学堂的一些提醒：

只选择紧贴在X元素之后Y元素。上面的例子，仅每一个ul之后的第一个类名为h5course元素的文本为红色。

兼容性

IE7+

Firefox

Chrome

Safari

Opera

子代选择器

基本语法

X > Y

#h5course > p {

color: red;

}

HTML5学堂的一些提醒：

X Y和X > Y之间的不同点是后者只选择直接子代。

选择符#h5course > p将只选择id为h5course的元素的直接子代p。它不匹配更深层的p元素。

兼容性

IE7+

Firefox

Chrome

Safari

Opera

兄弟选择器

基本语法

X ~ Y

ul ~ div {

color: red;

}

HTML5学堂的一些提醒：

与相邻选择符(ul + div)仅选择前一个选择符后面的第一个元素比起来，兄弟选择符更宽泛。它会选择，我们上面例子中更在ul后面的任何div元素。

兼容性

IE7+

Firefox

Chrome

Safari

Opera

属性选择器

基本语法

X[title]

a[title] {

color: red;

}

HTML5学堂的一些提醒：

属性选择器，在我们上面的例子里，这只会选择有title属性的锚标签。没有此属性的锚标签将不受影响。

兼容性

IE7+

Firefox

Chrome

Safari

Opera

欢迎沟通交流~HTML5学堂