Selector
一：类选择器
class元素可以有多个值，中间用空格隔开。一个文件中，可以有多个相同的class值。
<p class="first done"></p>
样式：
.first{
background-color: red;
}
二：ID选择器
#(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。
<p id="polite"></p>
样式：
#polite{
text-transform: uppercase;
}
三：通用选择器
* 允许选择一个页面的所有元素。
<p></p>
样式：
* {
text-decoration: line-through;
}
四：属性选择器
1：存在和值属性选择器(presence and value)
分为三种情况：属性名存在；属性名存在并且有对应的值；属性名存在并且包含对应的值。
-
[attr]只要包含该属性即可。不论是否有值，不论值为何。
<p data-fruit></p>
样式：
[data-fruit]{
color: green;
}
-
[attr=val]包含该属性，并且值也相等。
<p data-fruit="apple"></p>
样式：
[data-fruit="apple"]{
color: red;
}
- [attr~=val] 包含该属性，并且该属性中至少有一个值为val。
<p data-fruit="apple banana"></p>
<p data-fruit="apple"></p>
样式：
[data-fruit~="apple"]{
color: blue;
}
上面两个标签都会被匹配到。
2：子串值属性选择器(substring value 也叫伪正则)
-
[attr|=val]包含attr属性，并且值为value，或者值是以val-这样的形式开头。 -
[attr^=val]包含attr属性，并且值以val开头。 -
[attr$=val]包含attr属性，并且值以val结尾。 -
[attr*=val]包含attr属性，并且值中包含子字符串val。
五：伪类(pseudo-class)
以:作为前缀，被添加到一个选择器末尾的关键字。当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上伪类。
- 比如让超链接，访问前后样式一致，同时鼠标悬停时不一致。
a:visited{
color: blue;
}
/** 选择器上的逗号不能省略*/
a:hover,
a:active,
a:focus{
color: red;
text-decoration: none;
}
- 比如当一个列表的偶数行和奇数行的背景不同
<ul>
<li><p>这是第一行</p></li>
<li>p>这是第一行</p></li>
<li>p>这是第一行</p></li>
<li>p>这是第一行</p></li>
</ul>
li:nth-of-type(2n){
background-color: red;
}
li:nth-of-type(2n+1){
background-color:blue;
}
这里的nth-of-type() 是匹配兄弟节点。因此不能写成p:nth-of-type。另外如果使用的是nth-child()的话，它匹配的也是兄弟节点。虽然看名字像是一个孩子节点。
六：伪元素（Pseudo-element)
通过::这样两个冒号前缀，组合关键字，添加到某个元素的后面，去选择该元素的某个部分。
<a href="http://www.moremom.com">moremom</a>
a::after{
content:"后面追加内容";
}
或者
[href^="http"]::after{
content:"后面追加的内容";
}
七：组合器
| 名称 | 组合器 | 选择 |
|---|---|---|
| 选择器组 | A,B | 匹配A或B的任意元素 ，或者匹配A和B |
| 后代选择器 | A B | B是A的后代节点,匹配B |
| 子选择器 | A>B | B是A的直接子节点,匹配B |
| 相邻兄弟选择器 | A+B | B是A的下一个兄弟节点，B紧跟A，匹配B |
| 通用兄弟选择器 | A~B | B是A之后的兄弟节点中的任一个，匹配B |
八：选择器层叠
- casecase (层叠)，规则:
importance
specificity
source order
- 放在代码后面的样式，会覆盖较早的样式。
- id和class选择器优先于element选择器。
- !important 具有最高优先级。
- 用户重要>开发者重要>开发者普通>用户普通样式>用户代理样式。
- !important > id > class > element
- 通过style=" "的方式声明的样式，专用性最高。
