CSS常用的选择器

一般写法：#divBox p .red{color:red;}

更好写法：.red{..}

使用class代替层级关系

一般写法：#divBox ul li a{display:block;}

更好写法：.block{display:block;}

---

[](()必须记住的30类CSS选择器

---

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

[](()1.*

---

*{

margin: 0;

padding: 0;}

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

#container * {

border: 1px solid black;}

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

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

[](()2. #X

---

#container {

width: 960px;

margin: auto;}

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

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

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

[](()3. .X

---

.error {

color: red;}

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

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

[](()4. X Y

---

li a {

text-decoration: none;}

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

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

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

[](()5. X

---

a { color: red; }

ul { margin-left: 0; }

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

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

  </