CSS选择器

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 */
}

---