CSS选择器

选择器用于查找（或选取）想要设置样式的HTML元素，本文为学习选择器所做笔记，记录学习

//通配选择器
* {
属性名：属性值;
}

类选择器
.speak{     //speak为类，class="speak"
属性名：属性值;
}

id选择器
根据元素的id属性值，来精准选中某个元素，一个元素可以同时拥有id，和class属性，id属性值不能相同。
#id值{
属性名：属性值;
}

交集选择器
举例：
//选中类名为p标签的类名为beauty
p.beauty{
属性名：属性值;
}
//选中类名为rich和beauty的元素
.rich.beauty{
属性名：属性值;
}
并集选择器
语法：选择器1,选择器2{}  //选择器之间用‘，’隔开

兄弟选择器
//选中div紧紧相邻的兄弟p元素，--相邻兄弟选择器
div+p{

}
//选中div后所有的兄弟p元素----通用兄弟选择器
div~p{

}

//属性选择器
1、[属性名] 选中具有某个属性，但属性值等于指定元素
2、[属性名="值"]选中包含某个属性，且属性值等于指定值的元素
3、[属性名^="值"]选中包含某个属性，且属性值是以指定值开头的元素
4、[属性名$="值"]选中包含某个属性，且属性值是以指定值结尾的元素
5、[属性名*="值"]选中包含某个属性，且属性值是包含指定值的元素

伪类选择器
动态伪类：
1、:link 超链接未被访问的状态
2、:visited超链被访问过的状态
3、:hover鼠标悬停在元素上的状态
4、:active元素激活的状态    //激活--按下鼠标不松开
5、:focus获取焦点的元素    //表单类元素才能使用

结构伪类：
1、:first-child 所有兄弟元素中的第一个
2、:last-child所有兄弟元素中得最后一个
3、:nth-child(n)所有兄弟元素中得第n个
4、:first-of-type 所有同类型兄弟元素中的第一个
5、:last-of-type 所有同类型兄弟元素中的最后一个
6、:nth-of-type(n) 所有同类型兄弟元素中的第n个

关于n的值：
1、0或不写：什么都选不中
2、n:选中所有子元素
3、1~正无穷整数：选中对应序号的子元素
4、2n或even：选中序号为偶数的子元素
5、2n+1或odd：选中序号为奇数的子元素
6、-n+3：选中的是前三个

结构伪类2：
1、:nth-last-child(n) 所有兄弟的倒数第n个
2、:nth-last-of-type(n) 所有同类兄弟元素中的倒数第n个
3、:only-child 选择没有兄弟的元素（独生子女）
4、:only-of-type 选择没有同类兄弟的元素
5、:root 根元素
6、:empty 内容为空元素（空格也算内容）

否定伪类：
:not(选择器) 排除满足括号中条件的元素

ui伪类：
1、:checked 被选中的复选框或单选按钮、
2、:enabled 可用的表单元素 （没有disabled属性）
3、:disabled 不可用的表单元素（有disabled属性）

目标伪类：
:target 选中锚点指向的元素

语言伪类：
:lang() 根据指定的语言选择元素（本质看lang属性的值）
例：
div:lang(en) 选中div中语言为英文的元素

伪元素选择器：
作用：选中元素中的一些特殊位置
::first-letter  选中元素中的第一个文字
::first-line  选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框中的提示文字
::before 在元素最开始的位置，创建一个子元素，子元素必须用content属性指定内容
::after 在元素最后的位置，创建一个子元素，子元素必须用content属性指定内容

选择器优先级，格式：（a,b,c）
a:id选择器的个数
b:类，伪类，属性选择器的个数
c:元素，伪元素选择器的个数

特殊规则：
1、行内样式权重大于所有选择器样式
2、!important的权重，大于行内样式，大于所有选择器，权重最高

css三大特性
1、层叠性：如果发生样式冲突，那就会根据选择器优先级，进行样式的层叠
2、继承性：元素自动拥有其父元素或者祖先元素的某些样式，优先继承离得近的
3、优先级：可参考菜鸟教程CSS 样式优先级 | 菜鸟教程 (runoob.com)