CSS选择器
一、简单选择器和权值
1. 通配符选择器 （权值 - 0）
- 语法结构： * { 属性名:value; }
- 作用：统一页面风格样式，设置页面所有标签的通用属性样式，比如 margin 和 padding，文字字号、颜色等；
2. 标签选择器 （权值 - 1）
- 语法结构： 标签名 { 属性名:value; }
- 作用：统一页面中标签名相同的元素的风格样式；比通配符精确了一点。
3. 类选择器和伪类 （权值 - 10 ）
伪类的本质也是类，所以权值一样；
- 语法结构： .类名{属性名:value;}
- 作用：可以给某一类的风格样式添加到不同的标签中（这些标签可以相同的标签名，也可以不是相同的标签名），相对标签选择器更加灵活，范围也更大，属于给某一些标签打了标记，对这些打标记的标签设置共同的样式。
4. ID选择器 （权值 - 100）-精确制导
ID选择器属于精确制导，给页面中的一个标签，定一个唯一的标识符，和类的区别是，类可以标识很多标签，但是 ID 选择器只标识唯一的，这就是精确制导，目标很明确。
- 语法结构： #ID_NAME{属性名:value;}
- 作用：精确的控制某个标签的样式；
行内样式 - 它不是选择器-权重 1000 -融入血液
它不是选择器，因为它没得选，只跟随当前元素；
- 语法结构 <标签名 style=“属性名:value;” />
- 作用：一直粘着跟随着当前元素，且这个融入到血液中去，不能轻易被改变；
二、复杂选择器
1. 并集选择器- 逗号
- 语法结构：选择器1, 选择器2{…} – 建议逗号后换行书写，可读性更强。
- 作用：给这些选择器设置通用的样式；
2. 子代选择器-只选儿子-大于号 >
- 语法结构： 父亲选择器>儿子选择器{…}
- 作用：设置父元素的直接下级元素的样式；
3. 后代选择器 - 子孙都可选 - 空格
- 语法结构：父亲 儿子 孙子…{ … }
- 作用：选择某个元素内的任意元素，被选中的元素都是同一个祖先；
4. 兄弟选择器之 + 加号 -不影响该标签前面的元素
只选择按照流的顺序，即文档中元素的书写书序往下找到和自己相临的第一个同级元素。
- 场景：大哥小声的对后面的小弟说：“兄弟上”；这大哥声音太小，就后面紧挨着的这个小弟能听到，于是这个小弟上了。- 只是小弟干事，大哥不动，也就是只是小弟的样式生效
- 语法结构：a+button {…}
- 作用：上面的解读：选中a标签后面的同级的button元素，设置这个button的样式，并不设置 a 标签的样式。
5. 兄弟选择器之 ～ 波浪号 -不影响该标签前面的元素
- 场景：大哥拿着个大喇叭对后面一排兄弟喊：“后面的兄弟们上啊”；后面的小弟们都能听到，于是蜂拥而上了。
- 语法结构：a~button{color:red;}
- 作用：a 大哥发话让后面的 一众小弟 button 生效， a 并不生效。
6. 伪类选择器 - 单冒号
伪类选择器的作用：给某些元素添加特殊效果
6.1 动态伪类选择器-常用于鼠标事件和获取焦点的处理
下面以 a 标签举例
- a:link - 只能用于a标签，未被点击过的链接样式
- a:visited - 只用于 a 标签，被点击过后的链接样式
- a:active - 定义鼠标按下时，且未抬起鼠标按键情况下的样式
- a:hover - 鼠标悬停时元素的样式
- input:focus - 选择获得焦点的表单元素的样式设置
6.2 结构伪类选择器
主要是针对于选中元素中的子元素来进行设置布局结构响应的样式。
常用的结构伪类选择器如下(下文的E代表父元素中的某类选择器选中的子元素集合)：
- E:first-child 它是父元素的第一个元素，且第一个元素是E元素 - 比如 div p:first-child{} 选中的是div 中的第一个元素是p 元素，如果第一个元素不是p 元素，假如div 的第一个子元素是a 那么这个选择器 div p:first-child 的样式是无效的。
- E:last-child 最后一个E元素 - 比如 div p:last-child{} 选中的是div 中的最后一个p 元素
- E:nth-child(n) 第n 个E元素 - 比如 div p:nth-child(1){} 选中的是div 中的第一个p 元素，和 E:first-child 等效；
- E:nth-last-child(n) 倒数第n 个E元素 - 比如 div p:nth-last-child(1){} 选中的是div 中的倒数第一个p 元素，和 E:last-child 等效；
- E:first-of-type 找到第一个元素类型是E元素（不一定是父元素中的第一个元素） - 比如 div p:first-of-type{} 选中的是div 中 p 元素集合的第一个元素
- E:last-of-type 和上述的5 类似，只是它标识的是最后一个元素
- E:nth-of-type 结合3 和5 理解
- E:nth-last-of-type 结合 4和6 进行理解
- E:not(exception) 不满足 exception 条件的 E 元素，比如 div p:not(.first-p){} 选中的是：div 中所有类名不是 first-p 的 p 元素
7. 伪元素选择器 - 双冒号
作用：使用 CSS 创建新的元素（标签），不真实存在于 html 结构树中，达到简化HTML 结构的目的。因此多少情况下也用于清除浮动，或者添加装饰物。
常用的伪元素选择器有：
- E::before 在E元素之前添加一个元素，需要有 content属性配合使用
- E::after 用法同上，在E元素之后添加一个元素。
- E::first-letter 给第一个字母添加样式
- E::first-line 给第一行添加特殊样式
- E::selection 给被选中或高粱状态的 E 元素添加特殊样式
8. 属性选择器
写法1：选择器[属性名]{…}
- 语法：选择器[属性名]{…} 比如： div[title]{ font-weight:600;}
- 作用:选中有 title 属性的 div 设置文字为粗体 ，像这种会被选中
<div title="hello">Hello</div>
写法2：选择器[属性名=“hello”]{…}
- 语法：选择器[属性名=“hello”]{…} 比如： div[title=“hello”]{ font-weight:600;}
- 作用:选中有 title 属性的且该属性的值等于“hello”的 div 设置文字为粗体 ，像这种会被选中
<div title="hello">Hello</div> <!-- 生效--> <div title="hello1">Hello1</div> <!-- 不生效-->写法3：选择器[属性名 * = “hello”]{…}
- 语法：选择器[属性名 * = “hello”]{…} 比如： div[title~=“ello”]{ font-weight:600;}
- 作用:选中有 title 属性的 div ，切这个title 属性对应的值中包含了“ello”的元素，将其设置文字为粗体 ，像这种会被选中
<div title="hello">Hello</div> <!-- 生效--> <div title="hello1">Hello1</div> <!-- 生效-->写法4：选择器[属性名^=“hel”]{…}
由写法 3 可以延伸出 属性值以某个字符串片段开始的写法- 语法：选择器[属性名^=“hel”]{…}
<div title="hello">Hello</div> <!-- 生效--> <div title="hello1">Hello1</div> <!-- 生效-->写法5：选择器[属性名$=“llo”]{…}
以某个字符串片段为结尾- 语法：选择器[属性名$=“llo”]{…}
<div title="hello">Hello</div> <!-- 生效--> <div title="hello1">Hello1</div> <!-- 不生效-->
上述的写法中[ ]可以是多个，即多个属性满足条件时
