这是我参与「第五届青训营」笔记创作活动的的第2天
CSS选择器
选择器优先级
MDN文档对选择器优先级做出的解释：浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
优先级的计算规则：
- 优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
- 而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
- 当同一个元素有多个声明的时候，优先级才会有意义。
选择器权重
| 选择器 | 权重 |
|---|---|
| 继承或者 * | 0，0，0，0 |
| 元素选择器（标签选择器）伪元素 | 0，0，0，1 |
| 类选择器，伪类选择器，属性选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style="" | 1，0，0，0 |
| ！important重要的 | 无穷大 |
判断相关规则：
- 等级判断是从左到右，如果某一位数值相同，则判断下一位数值
- 权重可以叠加，但是永远不会有进位
基础选择器
1. 通配符选择器
在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）
* {
属性1: 属性值1; c
...
}
2. 元素选择器
CSS 元素选择器 (也称为类型选择器) 通过 node 节点名称匹配元素。因此，在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。
元素名 {样式声明 }
3. 类选择器
CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。
.类名 {样式声明 }
4. ID 选择器
id是唯一的，不能重复，多个单词能用中划线（连字符）联接
#id {样式声明 }
5. 属性选择器
CSS 属性选择器通过已经存在的属性名或属性值匹配元素。 例：
/* 存在 title 属性的<a> 元素 */
a[title] {
color: purple;
}
/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
color: green;
}
复合选择器
1. 后代选择器
选择父元素里面子元素 空格分隔
元素1（父） 元素2（子） { 样式声明 }
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */
2. 子选择器
只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素 >分隔
元素1 > 元素2 {样式声明}
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
3. 兄弟选择器
- 相邻兄弟选择器
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
- 通用兄弟选择器
兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。
4. 交集-并集选择器
-
交集选择器
- 需要同时符合两个选择器条件(两个选择器紧密连接)
- 在开发中通常为了精准的选择某一个元素;
span.one {} /* 具有one类值的span标签 */
-
并集选择器
- 符合一个选择器条件即可(两个选择器以,号分割)
- 在开发中通常为了给多个元素设置相同的样式;
.one ,.two {} /* 类one、two都具有下面样式 */
伪类选择器
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。
- a:link 未访问的链接
- a:visited 已访问的链接
- :focus 指当前拥有输入焦点的元素(能接收键盘输入)文本输入框一聚焦后，背景就会变红色 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
- a:hover 鼠标挪动到链接上(重要)
- a:active 激活的链接（鼠标在链接上长按住未松开)
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 所以建议的编写顺序是: link、 :visited、:focus、:hover、:active
本文若有不足之处,欢迎纠正
