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