CSS 选择器

本文作为CSS选择器的简单介绍。文章参考来自Beginner Concepts: How CSS Selectors Work

---

目录

---

ID选择器

ID选择器是最“强大的”也是最不推荐使用的。使用方法很简单：

#element_id {    color: red;}

直接给定元素的样式。

类选择器

类选择器是广泛使用的。不妨把相同渲染方式的元素置为一类，这样方便制定样式，而且也可以用于 JavaScript 的操作。使用：

.class_name {}

标签选择

标签选择器，作用范围很广。我们可以使用标签选择器，来将页面中 HTML 标签设置展示方式。但是不推荐这么做，比较好的做法是用 class 定制这些相同样式的标签。

h2 {}

属性选择器

[attribute_name="attribute_value"] {}

比类选择器更强大。可以将所有含有指定属性的元素进行渲染。注意：IE6不支持属性选择器。

位置选择器

:nth-child(2) {}

给指定位置进行展示，如上例中的第二个子元素。

伪选择器

:empty {}

:empty是其中一种伪选择器。伪选择器主要用于你尚未知道元素或者属性名的时候。

选择器组合使用

.class_one.class_two {    /*同时符合这两种类的元素*/}#element_id::after {    /*在指定ID后面的元素*/}h2[attribute_name] {    /* h2 并且有指定属性*/}.class_name > h2 {    /*指定类的元素的子元素h2*/}h2 + p {    /*选择p元素，这些元素是作为h2的直接子元素的*/}li ~ li {    /*选择li元素，它们后面跟着同级的li */}

---