开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情
一、基础选择器与权重判断
| 内联样式表 | 1000 |
| ID选择器 | 100 |
| Class选择器 | 10 |
| 标签选择器 | 1 |
- 选择器都有一个权值，权值越大越优先；
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
- 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
- 继承的CSS 样式不如后来指定的CSS 样式；
- 在同一组属性设置中标有"!important"规则的优先级最大；
二、嵌套选择器
选择器之间可以进行嵌套，形成CSS组合选择器
div p{} // 后代选择器，通过空格分开，匹配div下的所有p标签
div>p{} //子类选择器，通过>分开，匹配div下直属的p标签
div+p{} // 相邻兄弟选择器，通过+号分割，匹配div后面的第一个p标签
// 要求div标后面第一个元素为p标签，否则将选择不到。（div和p标签必须紧靠）
div~p{} // 兄弟选择器，通过~分开，只要是div的兄弟关系的p标签都可匹配到。
三、属性选择器
CSS可以通过HTML上的属性来查找元素：
<input type="text"></input>
input[type]{} // 选择有type属性的input
input[type="text"]{} // 选择有type属性为text的input
input[type~="text"]{} // 选择有type属性值为组（逗号分开），且包含text的input
input[type^="t"]{} // 选择type属性以t开头的input
input[type$="t"]{} // 选择type属性以t结尾的input
input[type*="t"]{} // 选择type属性包含t的input
四、CSS3中新增的选择器
CSS3在2.0版本的css选择器基础上，新增了很多选择器，
这是CSS2中可用的选择器
a,b{} // 选择所有a元素和所有b元素
a b{} // 选择a元素下的所有b标签
a > b{} // 选择a元素的直接子元素b
a + b{} // 选择a紧接着的一个b元素（兄弟元素，中间不能包含其他元素）
a[attr] // 选择拥有attr属性的a元素，不管arrt的值是什么，有就可以选中
a[attr=n] // 选择attr属性的值为n的a元素
a[attr~=n] // 选择attr属性的值包含n字符的a元素
a:link // 选择未访问过的a标签，这里的a是标签的a
a:visited // 选择已访问过的a标签
a:active // 选择被按下的a标签（按下的一瞬间出现效果）
a:hover // 选择鼠标移入a元素时的状态
input:focus // 选择获取焦点的input元素（通常是input元素）
a:first-letter // 选择a元素中的第一个字母
a:first-line // 选择a元素的第一行
a:first-child // 选择a元素下的第一个元素
a:before // 在a元素之前插入元素
a:after // 在a元素之后插入元素
css3新增了这些选择器：
a~b{} // 选择a同级并且位于a之后的b元素
[attr^=n] // 选择属性attr以n开头的元素
[attr$=n] // 选择属性attr以n结尾的元素
[attr*=n] // 选择属性attr包含n字符的元素
a:first-of-type // 选择位于父元素第一个的a元素
a:last-of-type // 选择位于父元素最后一个的a元素
a:only-of-type // 选择父元素中只有一个a元素时的那个a元素（可以有其他元素）
a:only-child // 选择父元素中只有a元素一个时的这个a元素（不能有其他元素）
a:nth-child(n) // 选择父元素下所有元素中排第n个的a元素，从1开始算，非a元素也算n
a:nth-last-child(n) // 选择父元素中排倒数第n个的a元素，从1开始算，非a元素也算n
a:nth-of-type(n) // 选择父元素下所有a元素的第n个a元素，n只算a元素
a:nth-last-of-type(n) // 选择父元素下所有a元素的倒数第n个a元素，n只算a元素
a:last-child // 选择父元素下最后一个元素为a元素的这个a元素
:root // 选择文档根元素
a:empty // 选择不含任何节点的a元素
input:enabled // 选择没有被禁用的input元素
input:disabled // 选择禁用的input元素
input:checked // 选择每个选中的input元素
:not(a) // 选择除了a元素之外的其他元素
// 还有一些比较少能用上的不做了解
