什么是CSS选择器
CSS选择器用来指定网页上需要进行样式化的元素。先选中特定的HTML元素，然后设置该元素的样式。语法：
选择器：{ 样式属性：属性的值 }
CSS选择器的类型
在前面的文章中，你也许已经见过CSS选择器了。例如：
body { background-color: red; }
这段代码的意思就是，设置body元素的背景页为红色。其中，body 选中了HTML文档中的body元素，background-color: red指定设置背景色为红色。最常见的CSS选择器有：类型选择器、类选择器、ID选择器、属性选择器、伪类选择器、后代选择器、子代选择器等等。
- • 类型选择器
上面的body就是一个类型选择器，指定选中的HTML元素的种类。
/* 选中页面中所有的h1元素 */ h1 { font-size: 14px; } /* 选中页面中所有的a元素 */ a { color: #000; }
- • 类选择器 通过元素的类名，来选中元素
/* 选中页面中所有带有 title 类的元素 */ .title { ... }
- • ID选择器 通过元素的ID，来选中元素。
/* 选中页面中ID为submit的元素 */ #submit { ... }
- • 属性选择器 通过元素的属性，来选中元素.
/* 选中页面中带有属性data-active属性且data-active="true"的元素 */ [data-active="true"] { ... }
- • 伪类选择器 对某些元素的特殊状态进行样式化。
/* 鼠标悬停到a元素上时的样式 */ a:hover { ... }
- • 后代选择器 组合选择器。选择符合条件的元素的特定后代元素
/* 选中article元素后代中的P元素 */ article p { ... }
- • 子代选择器 组合选择器。选择符合条件的元素的特定儿子元素
/* 选中article元素儿子元素中的P元素 */ article > p { }
- • 相邻兄弟选择器 组合选择器。当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中.
/* img后面紧跟着的p元素将被选中 */ img + p { ... }
- • 通用兄弟选择器 组合选择器。当两个元素处于统一层级时，第一个元素后的所有第二个元素被选中.
/* img元素后的所有.text类元素都被选中 */ img ~ .text { ... }
选择器列表
考虑以下场景，有两种元素，我需要设置同样的字体颜色，如：
.text { color: red; } .error { color: red; }
这种情况下，可以将两个选择器用逗号链接起来，如下：
.text, .error { color: red; }
样式的继承
对于一些特定的样式属性，如font-size等，如果我们没有显式的去设置，那么该样式的值将会继承其父元素的样式。若父元素也未进行设置，则会继续查找父元素的父元素，直到根元素为止。如：
/* HTML代码 */ <p class='wrapper'> 哈哈哈哈<span class='text'>你好哇</span> </p> /* CSS代码 */ .wrapper { color: #000; font-size: 24px; } .text { color: red; }
.text是.wrapper的子元素。我们没有显式的设置.text的font-size大小，那么其将继承.wrapper的字体大小。最终.text的font-size也为24px; color也是一个继承属性，但是因为我们显式设置了.text的color属性，因此其字体颜色为红色而不是黑色。
常见的可继承的样式属性有：font-size, font-family, text-align, line-height, color等。
注意：
- • 如果整个页面都没有对样式进行显式设置，那么将会展现浏览器的默认样式。
- • 某些情况下，可继承属性也无法继承，因为浏览器有特定的样式，如：a元素的字体颜色就无法继承其父元素的字体颜色。浏览器对a元素的字体颜色有特殊处理。
那么问题来了，如果对于同一个元素的同一个样式属性，我前后设置了两次，并且两次设置的值不一样，那么最终的效果是怎样的呢？这涉及到样式的优先级问题，将在下一章进行介绍。
