必须记住的30类CSS选择器_html/css_WEB-ITnose

大概大家读知道`id`,`class`以及`descendant`选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏览器中才能生效，你完全应该把这些都记在你聪明的脑袋里面。
1. *

Css代码

* { margin: 0; padding: 0; }

在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和`padding`。当然你在练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。
`*`也可以用来选择某元素的所有子元素。

Css代码

#container * { border: 1px solid black; }

它会选中`#container`下的所有元素。当然，我还是不建议你去使用它，如果可能的话。

DEMO
兼容性

IE6+ Firefox Chrome Safari Opera

2. #X

Css代码

#container { width: 960px; margin: auto; }

在选择器中使用`#`可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。
需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？

`id`选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。
DEMO
兼容性

IE6+ Firefox Chrome Safari Opera

3. .X

Css代码

.error { color: red; }

这是个`class`选择器。它跟`id`选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。
DEMO
兼容性

IE6+ Firefox Chrome Safari Opera

4. X Y

Css代码

li a { text-decoration: none; }

下一个常用的就是`descendant`选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的`a`元素，而只需要定位`li`标签下的`a`标签？这时候你就需要使用`descendant`选择器了。

专家提示：如果你的选择器像`X Y Z A B.error`这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。
DEMO
兼容性

IE6+ Firefox Chrome Safari Opera

5. X

Css代码

a { color: red; } ul { margin-left: 0; }

如果你想定位页面上所有的某标签，不是通过`id`或者是’class’，这简单，直接使用类型选择器。
DEMO
兼容性

IE6+ Firefox Chrome Safari Opera

6. X:visited 和 X:link

Css代码

a:link {color:red;} a:visited {color: purple;}

我们使用`:link`这个伪类来定位所有还没有被访问过的链接。
另外，我们也使用`:visited`来定位所有已经被访问过的链接。
DEMO
兼容性

IE7+ Firefox Chrome Safari Opera

7. X+Y

Css代码

ul + p { color: red; }

这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段，并将它们的颜色都设置为红色。
DEMO
兼容性

IE7+ Firefox Chrome Safari Opera

8. X>Y

Css代码

div#container > ul { border: 1px solid black; }

`X Y`和`X > Y`的差别就是后面这个指挥选择它的直接子元素。看下面的例子：

Css代码

List Item Child List Item List Item List Item

查看更多关于必须记住的30类CSS选择器_html/css_WEB-ITnose的详细内容...