1.选择器
标签 {
属性：值；}
选择器 {
声明 }
1.1标签选择器
依据标签的名字找对应标签，设置属性。
格式：
标签名称 {
属性：值；
···
}
注意点：
标签选择器会选后，当前页面的所有该标签都被选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>便签选择器</title>
<style>
h1 {
color: red;
}
h3 {
color: aqua;
}
</style>
</head>
<body>
<h1>石灰吟</h1>
<h6>作者：于谦</h6>
<h3>千锤万凿出深山，烈火焚烧若等闲。</h3>
<h3>粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
1.2id选择器
依据标签的id找对应标签，设置属性。
格式：
#id名称 {
属性：值；
}
注意：
1.id选择器需要加上#号。
2.每个标签都有id属性，同一个页面中id不能重复。
3.id只能由字母/数字/下划线组成，不能以数字开头，也不能与标签名重名。
4.一般情况下不会使用id，在前端中id是留给js使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#d1 {
color:red;
}
#d2 {
color:aqua;
}
</style>
</head>
<body>
<h1>石灰吟</h1>
<h6>作者：于谦</h6>
<h3 id="d1">千锤万凿出深山，烈火焚烧若等闲。</h3>
<h3 id="d2">粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
1.3类选择器
依据标签的类名找对应标签，设置属性。
格式：
.类名 {
属性：值；
}
注意：
1.类选择器需要加上.号。
2.每个标签都有class属性，类名可以重复。
3.类名只能由字母/数字/下划线组成，不能以数字开头，也不能与标签名重名。
4.类名是给标签设置样式的，CSS使用。
5.标签可以绑定多个类名，类名之间用空格隔开。
<标签 class="类名1 类名2 ···">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.c1 {
color: red;
}
.c2 {
color: aqua;
}
.typeface {
font-family:'楷体';
}
</style>
</head>
<body>
<h1>石灰吟</h1>
<h6 class="c1">作者：于谦</h6>
<h3 class="c2 typeface">千锤万凿出深山，烈火焚烧若等闲。</h3>
<h3>粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
2.后代选择器
后代标签包括了儿子标签，孙子标签 ···
后代选择器会选中所有指定标签中，所有的特定后代标签。
注意点：
1.后代选中器使用空格隔开。
2.标签名称 id 类可以进行任意组合。
格式：
标签名称/#id/.类名 标签名称/#id/.类名 {
属性：值；
}
2.1后代选择器(标签组合)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(标签组合)</title>
<style>
ul li p{
color: red;
}
body p {
font-size: 30px;
}
</style>
</head>
<body>
<p>段落一</p>
<ul>
<li><p>段落二</p></li>
</ul>
<p>段落三</p>
</body>
</html>
2.2后代选择器(id组合)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(id组合)</title>
<style>
#d1 #d2 #d3 {
color: red;
}
</style>
</head>
<body>
<p>段落一</p>
<ul id="d1">
<li id="d2">
<p id="d3">段落二</p>
</li>
</ul>
<p>段落三</p>
</body>
</html>
2.3后代选择器(类组合)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(类组合)</title>
<style>
.c1 .c2 .c3 {
color: red;
}
</style>
</head>
<body>
<p>段落一</p>
<ul class="c1">
<li class="c2">
<p class="c3">段落二</p>
</li>
</ul>
<p>段落三</p>
</body>
</html>
2.4后代选择器(混合组合)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(混合组合)</title>
<style>
ul #d1 .c1 {
color: red;
}
</style>
</head>
<body>
<p>段落一</p>
<ul>
<li id="d1">
<p class="c1">段落二</p>
</li>
</ul>
<p>段落三</p>
</body>
</html>
3.子元素选择器
找到标签的儿子标签，设置属性。
注意点：
1.子元素之间需要使用>号。（不能出现空格）
2.子元素只会作用于儿子标签,不会查找其他被嵌套的标签。
3.选择器可以是 标签/id/类 名称 任意组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(标签组合)</title>
<style>
ul>li>p{
color: red;
}
body>p {
font-size: 30px;
}
</style>
</head>
<body>
<p>段落一</p>
<ul>
<li><p>段落二</p></li>
</ul>
<p>段落三</p>
</body>
</html>
4.交集选择器
找到 所有选择器选中的标签中，相交的标签，设置属性。
格式：
选择器1选择器2 {
属性：值；
}
注意点：
1.选择器中没有符号。
2.选择器可以是 标签/id/类 名称 任意组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
p.c1 {
color: red;
}
.c1#d1 {
color: aqua;
}
</style>
</head>
<body>
<h1 class="c1" id="d1">标题</h1>
<p>第一段落</p>
<p class="c1">第二段落</p>
<p>第三段落</p>
<p class="c1">第四段落</p>
<p>第五段落</p>
</body>
</html>
5.并集选择器
给所有选择器选中的标签设置属性。
格式：
选择器1，选择器2 {
属性：值；
}
注意点：
1.并集选择器使用，号连接。
2.选择器可以是 标签/id/类 名称 任意组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
.c1,.c2 {
color: red;
}
</style>
</head>
<body>
<h1 class="c1">标题</h1>
<p class="c2">第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
6.兄弟选择器
1.相邻兄弟选择器 CSS2 同级,紧跟在自己标签后面的第一个标签，设置属性。
注意点：
1.相邻兄弟选择器必须使用+号连接。
2.通用兄弟选择器 CSS3 同级,自己标签后面的所有选中的标签，设置属性。
注意点：
1.通用兄弟选择器必须使用~号连接。
6.1相邻兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style>
h1+p {
color: red;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
6.2通用兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器 </title>
<style>
h1~p {
color: red;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
<a href="#">超链接</a>
</body>
</html>
7.序选择器
CSS3中新增加且具有代表性的选择器。
1.同级别的第几个
格式：
同级别的第一个标签
标签：first-child {
属性：值；}
同级别的最后一个标签
标签：last-child {
属性：值；}
同级别的第n个标签
标签：nth-child(n) {
属性：值；}
同级别的倒数第n个标签
标签：nth-last-child(n) {
属性：值；}
父元素中只存在唯一一个标签
only-child {
属性：值；}
同级别的所有奇数标签
标签：nth-child(odd) {
属性：值；}
同级别的所有偶数标签
标签：nth-child(even) {
属性：值；}
同级别公式选择器
nth-child(xn+y) {
属性：值；}
x 与 y 为自定义数字
n为数字从0开始递增。
2n+0 2*0+0 = 0 2n+1 2*0+1 = 1
2n+0 2*1+0 = 2 2n+1 2*1+1 = 3
注意点：
不区分类型。
2.同级同类型的第几个
格式：
同级同类型的第一个标签
标签：first-fo-tyoe {
属性：值；}
同级同类型的最后一个标签
标签：last-fo-tyoe {
属性：值；}
同级同类型的第n个标签
标签：nth-fo-type(n) {
属性：值；}
同级同类型的倒数第n个标签
标签：nth-last-fo-type(n) {
属性：值；}
父元素中同类型标签只存在一个
only-of-type {
属性：值；}
注意点：
区分类型。
7.1同级别选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级别选择器</title>
<style>
p:first-of-type {
color: red;
}
p:last-of-type {
color: aqua;
}
p:nth-of-type(3) {
color: blue;
}
</style>
</head>
<body>
<h1>标签</h1>
<p>1段落</p>
<p>2段落</p>
<p>3段落</p>
<p>4段落</p>
<p>5段落</p>
<p>6段落</p>
<ul>
<li>
<p>7.1段落</p>
<p>7.2段落</p>
<p>7.3段落</p>
<p>7.4段落</p>
<p>7.5段落</p>
<p>7.6段落</p>
</li>
</ul>
</body>
</html>
7.2同级别下同类型选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级别下同类型选择器</title>
<style>
p:first-of-type {
color: red;
}
p:last-of-type {
color: aqua;
}
p:nth-of-type(3) {
color: blue;
}
</style>
</head>
<body>
<h1>标签</h1>
<p>1段落</p>
<p>2段落</p>
<p>3段落</p>
<p>4段落</p>
<p>5段落</p>
<p>6段落</p>
<ul>
<li>
<p>7.1段落</p>
<p>7.2段落</p>
<p>7.3段落</p>
<p>7.4段落</p>
<p>7.5段落</p>
<p>7.6段落</p>
</li>
</ul>
</body>
</html>
7.3同级别标签唯一选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级别标签唯一选择器</title>
<style>
p:only-child {
color: red;
}
</style>
</head>
<body>
<p>1段落</p>
<ul>
<li>
<p>2.1段落</p>
</li>
</ul>
</body>
</html>
7.4同级别下类型唯一选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级别下类型唯一选择器</title>
<style>
p:only-child {
color: red;
}
</style>
</head>
<body>
<p>1段落</p>
<ul>
<li>
<p>2.1段落</p>
</li>
</ul>
</body>
</html>
7.5同级别奇偶选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级别奇偶选择器</title>
<style>
p:nth-child(odd) {
color:red;
}
p:nth-child(even) {
color:blue;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</body>
</html>
7.6同级别下同类型奇偶选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级别下同类型_奇偶)</title>
<style>
p:nth-of-type(odd) {
color: red;
}
p:nth-of-type(even) {
color: blue;
}
</style>
</head>
<body>
<h1>标签1</h1>
<p>1</p>
<h6>a</h6>
<p>2</p>
<h6>a</h6>
<p>3</p>
<ul>
<li>
<p>2.1</p>
<p>2.2</p>
<p>2.3</p>
</li>
</ul>
</body>
</html>
7.7同级别选择器公式的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级别公式选择器</title>
<style>
p:nth-child(2n+0) {
color: red;
}
p:nth-child(2n+1) {
color: blue;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</body>
</html>
7.8同级别下同类型选择器(公式的使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级别下同类型选择器(公式的使用).html</title>
<style>
p:nth-of-type(2n+0) {
color: red;
}
p:nth-of-type(2n+1) {
color: aqua;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<ul>
<li>
<p>7.1</p>
<p>7.2</p>
<p>7.3</p>
</li>
</ul>
</body>
</html>
8.属性选择器
依据属性找对应标签，设置属性。
格式：
[attribute]
标签 [属性] {
属性：值；
}
依据属性值等于value找对应标签，设置属性。
[attribute=value]
标签 [属性=值] {
属性：值；
}
常用于input标签
input[type=password]{
属性：值}
<input type="password" name="" id="">
8.1属性选择器1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
p[id] {
color: red;
}
</style>
</head>
<body>
<p id="d1">1</p>
<p>2</p>
<p id="d2">3</p>
<p>4</p>
<p id="d3">5</p>
</body>
</html>
8.2属性选择器2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器2</title>
<style>
p[class=c1] {
color: red;
}
</style>
</head>
<body>
<p class="c1">1</p>
<p>2</p>
<p class="c1">3</p>
<p>4</p>
<p class="c2">5</p>
</body>
</html>
8.3另外三类
1.属性的取值以什么开头
[attribute|=value] CSS2
[attribute^=value] CSS3 替代上面这个
区别：
CSS2中的只能找到value开头，并且value是被-隔开的。
CSS3中的只能找到value开头的都可以找到。
2.属性的取值以什么结尾
[attribute$=value] CSS3
3.属性的取值包含某个值
[attribute~=value] CSS2
[attribute*=value] CSS3 替代上面这个
区别：
CSS2中的只能找到独立的单词，左右两边被空格隔开。
CSS3中的只要是包含value就能找到。
1.属性选择器(以什么值开头)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器(以什么值开头)</title>
<style>
img[alt^=abc] {
color: red;
}
img[alt|=abc] {
font-size: 30px;
}
</style>
</head>
<body>
<img src="" alt="abc-1">
<img src="" alt="abc2">
<img src="" alt="abc 3">
<img src="" alt="xxx">
</body>
</html>
2.属性选择器(以什么值结尾)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器(以什么值结尾)</title>
<style>
img[alt$=a] {
color: red;
}
</style>
</head>
<body>
<img src="" alt="1-a">
<img src="" alt="2 a">
<img src="" alt="3a">
<img src="" alt="xa">
<img src="" alt="xx">
</body>
</html>
3.属性选择器(包含某个值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器(包含某个值)</title>
<style>
img[alt*=abc] {
color: red;
}
img[alt~=abc] {
font-size: 30px;
}
</style>
</head>
<body>
<img src="" alt="qqq abc xxx">
<img src="" alt="www-abc-xxx">
<img src="" alt="abcdef">
<img src="" alt="qqqabc">
<img src="" alt="xxxxx">
</body>
</html>
9.通配符选择器
为当前页面所有的标签设置属性。
格式：
* {
属性：值；
}
注意：
使用后会遍历所有的标签，当标签比较多的时候，性能会变差，开发者一帮不会去使用。
（后续学习其他的方案去解决这些问题。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>1</p>
<p>2</p>
<ul>
<li>
<p>3.1</p>
<p>3.2</p>
</li>
</ul>
</body>
</html>