CSS 基本选择器
1. 通配选择器
作用：可以选中所有的 html 元素，对于清除样式有帮助
* {属性名：属性值}
2. 元素选择器
元素名 {属性名：属性值}
3. 类选择器
根据 class 来进行分类，类选择器需要用，使用频率很高
.class值{属性名：属性值}
ps: 多个class需要用空格连接写在一起
4. ID 选择器
针对单个元素
#id 值{属性名：属性值}
注意：
- id 属性值：避免空格，区分大小写
- 一个元素只能拥有一个 id 属性，多个元素 id 不能相同
- 一个元素可以同时拥有 id 和 class
复合选择器
5. 交集选择器（和）
元素选择器与类选择器结合，不可以两个条件全是元素，可以全是类
元素.class值{属性名：属性值}
.class值.class值{属性名：属性值}
注意：例如当颜色发生冲突，首先看样式执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
color: blue;
}
.speak{
color:chocolate;
}
.answer{
color: blueviolet;
}
</style>
</head>
<body>
<h2>hello</h2>
<p class="speak">你说：</p>
<p class="answer">回答：</p>
</body>
</html>
6. 并集选择器（或）
选中多个选择器对应的元素，又称分组选择器
.class值,元素,.class值,#id值{属性名：属性值}
7. 后代选择器
作用：选择指定元素中，符合后代（儿子、孙子、重孙）的元素，使用空格分开
ul li a{属性名：属性值}
祖先选择器 父选择器 子选择器{属性名：属性值}
8.子代选择器
祖先选择器>父选择器>子选择器{属性名：属性值}
9. 兄弟选择器(作用在下面)
1）相邻兄弟选择器
作用：选中指定元素后，符合条件的相邻兄弟元素
div+p{属性名：属性值}
2）通用兄弟选择器
作用：顶顶元素后，符合条件的所有兄弟元素
div~p{属性名：属性值}
10. 属性选择器
一共5种
/* 第一种：选中具有title元素*/
[title]{
color:aquamarine;
}
/* 第二种：选中具有title元素，且属性值为 china*/
[title="china"]{
color:green;
}
/* 第三种：选中具有title元素，且属性值以a开头*/
[title^="a"]{
color:red;
}
/* 第四种：选中具有title元素，且属性值以o结尾*/
[title$="o"]{
color:aquamarine;
}
/* 第五种：选中具有title元素，且属性值包含 a*/
[title*="a"]{
color:purple;
}
引用如下：<div title="hello">welcome</div>
11. 伪类选择器
像类，是元素特殊状态的一种描述
1）动态伪类
顺序就是 lvha 不要随意更换
可以用于：
- span 标签
- input 焦点标签，focus只能用于表单元素，select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 没有访问过的网址red */
a:link{
color:brown;
}
/* 访问过网址为blue */
a:visited{
color:blue;
}
/* 鼠标悬浮在网址上为blue */
a:hover{
color:aqua;
}
/* 鼠标悬浮在网址上为blue */
a:active{
color: green;
}
input:foucs{
color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.jd.com">京东</a>
</body>
</html>
12. 结构伪类
- 大范围结构
1）选中 div 所有儿子第一个，注意如果第一个儿子不是p那么不会体现效果
div>p:first-child{属性名:属性值}
first-child 看的是所有的儿子
2）选中的是 div 的后代 p 元素，且 p 的父级是谁无所谓，但是p必须是其父亲的第一个儿子
div p:first-child{属性名:属性值}
3）选中的是 p 元素，且 p 的父级是谁无所谓，但是p必须是其父亲的第一个儿子
p:first-child{属性名:属性值}
ps：
1）xxx-child 按照所有兄弟计算的,last-child同理
2）div>p:nth-child(数字/even/2n/2n+1/odd/-n+5){属性名:属性值} 选中的的是div的xx个儿子 p 元素
- 调整缩小选中范围的结构
1）同类型的属性的第一个
div>p:first-of-type{属性名:属性值}
2）同类型的属性的第n个儿子元素
div>p:nth-of-type(n){属性名:属性值}
- 倒数选中
1）所有情况下，选中div 中倒数第n个儿子
div>p:nth-last-child(n){属性名:属性值}
2）同类型的范围，选中div 中倒数第n个儿子
div>p:nth-last-of-type(n){属性名:属性值}
1）选中没有兄弟的元素
span:only-child{属性名:属性值}}
2）选中没有同类型的兄弟的元素
span:only-of-type{属性名:属性值}
- 特殊结构
1）选中html根元素
:root{属性名:属性值}}
2）选中的是没有内容的 div 元素，包括空格也算内容
div:empty{属性名:属性值}
总结
:nth-last-child(n)所有兄弟元素中的倒数第n个:nth-last-of-type(n)所有同类型兄弟元素中倒数第n个:only-child独生子女，没有兄弟:only-of-type没有同类型的兄弟:root根元素:empty内容为空元素，空格也算
13. 否定伪类
选中div的儿子p，排除class值的元素
div>p:not(.class值){属性名:属性值}
14. UI 伪类
选中的是勾选的复选框
input:checked{属性名:属性值}
input:disabled{属性名:属性值}
- 复选框 checkbox ，单选框 radio 受到背景颜色限制
15. 目标伪类
div:target
16. 语言伪类
div:lang(en){属性名:属性值}
:lang(en){属性名:属性值} 选中所有元素的en lang
17. 伪元素
1）选中标签元素内容中的第一个字母
div::first-letter{属性名:属性值}
2）选中标签元素内容中第一行
div::first-line{属性名:属性值}
3）鼠标选中标签元素内容
div::selection{属性名:属性值}
4）选中的是 input 的提示文字
input::placeholder{属性名:属性值}
5）选中元素的最开始（后）位置，必须配合 content 属性指定内容
p::before{content:"￥"}
p::after{content:".00"}
选择器的优先级
同类型选择器后来居上，行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配选择器
a. id 选择器个数
b. 类，伪类，属性选择器个数
c. 元素，伪元素
复杂的进行权重比较（a，b，c），权重相同后来居上
举例：
div>p>span:nth-child(1)权重（0，1，3）
div>p>span:first-child(1)权重（0，1，3）
二者相同权重，后来居上，听下面的
鼠标放上面权重是算好的
ps: 无敌的，高于行内的例子
div { color:属性值 !important}
