关系选择器
1、后代选择器：用空格隔开
2、子代选择器：用>号连接
3、兄弟选择器：用+号连接（向下找相邻的第一个兄弟）
4、通用选择符：用~号连接（向下找所有的这类）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>p>b{color:#f00;}p+span{color:#ff0;}p~h1{color:#0ff;}</style></head><body><p><b>p下的标签</b>选择器</p><p><em><b>p>em下的b标签</b></em></p><span>选择器</span><h1>选择器</h1><h1>选择器</h1><h1>选择器</h1><h1>选择器</h1></body></html>
结构化伪类选择器
:root选择器
:root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>root选择器的使用</title>
<style type="text/css">
:root{color:red;}
h2{color:blue;}
</style>
</head>
<body>
<h2>《渡荆门送别》</h2>
<p>渡远荆门外，来从楚国游。
山随平野尽，江入大荒流。
月下飞天镜，云生结海楼。
仍怜故乡水，万里送行舟。
</p>
</body>
</html>
:not选择器
如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>not选择器的使用</title>
<style type="text/css">
body *:not(h2){
color:orange;
font-family:"宋体";
font-size:20px;
}
</style>
</head>
<body>
<h2>题李凝幽居</h2>
<p>闲居少邻并，草径入荒园。</p>
<p>鸟宿池边树，僧敲月下门。</p>
<p>过桥分野色，移石动云根。</p>
<p>暂去还来此，幽期不负言。</p>
</body>
</html>
“body*:not(h2)”选择器用于排除body结构中的子结构元素h2，使其不应用该文本样式。
:only-child选择器
:only-child选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child选择器”可以选择这个子元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>only-child选择器的使用</title>
<style type="text/css">
li:only-child{color:red;}
</style>
</head>
<body>
<div>
国内电影：
<ul>
<li>一代宗师</li>
<li>叶问</li>
<li>非诚勿扰</li>
</ul>
美国电影：
<ul>
<li>侏罗纪世界</li>
</ul>
日本动漫：
<ul>
<li>蜡笔小新</li>
<li>火影忍者</li>
<li>航海王</li>
</ul>
</div>
</body>
</html>
使用:only-child选择器“li:only-child”，用于选择作为ul唯一子元素的li元素设置为红色。
:first-child和:last-child选择器
:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-child和last-child选择器的使用</title>
<style type="text/css">
p:first-child{
color:pink;
font-size:16px;
font-family:"宋体";
}
p:last-child{
color:blue;
font-size:16px;
font-family:"微软雅黑";
}
</style>
</head>
<body>
<p>鲁山山行</p>
<p>适与野情惬，千山高复低。</p>
<p>好峰随处改，幽径独行迷。</p>
<p>霜落熊升树，林空鹿饮溪。</p>
<p>人家在何许？云外一声鸡。</p>
</body>
</html>
分别使用了选择器“p:first-child”和“p:last-child”，用于选择作为其父元素的第一个子元素和最后一个子元素p（它们的父元素为body），然后为它们设置特殊的文本样式。
:nth-child(n)和:nth-last-child(n)选择器
使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或者倒数第2个子元素，这两个选择器就不起作用了。为此，CSS引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nth-child(n)和nth-last-child(n)选择器的使用</title>
<style type="text/css">
p:nth-child(2){
color:pink;
font-size:16px;
font-family:"宋体";
}
p:nth-last-child(2){
color:blue;
font-size:16px;
font-family:"微软雅黑";
}
</style>
</head>
<body>
<p>梅花</p>
<p>数萼初含雪，孤标画本难。</p>
<p>香中别有韵，清极不知寒。</p>
<p>横笛和愁听，斜枝倚病看。</p>
<p>朔风如解意，容易莫摧残。</p>
</body>
</html>
使用选择器“p:nth-child(2)”和“p:nth-last-child(2)”，用于选择作为其父元素的第2个子元素p和倒数第2个子元素p（它们的父元素为body），然后为它们设置特殊的文本样式。
:nth-of-type(n)和:nth-last-of-type(n)选择器
:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nth-of-type(n)和nth-last-of-type(n)选择器</title>
<style type="text/css">
h2:nth-of-type(odd){color:#f09;}
h2:nth-of-type(even){color:#12ff65;}
p:nth-last-of-type(2){font-weight:bold;}
</style>
</head>
<body>
<h2>李白</h2>
<p>李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。</p>
<h2>杜甫</h2>
<p>杜甫（712年—770年），字子美，汉族，本襄阳人，后徙河南巩县。自号少陵野老，唐代伟大的现实主义诗人。</p>
<h2>李商隐</h2>
<p>李商隐（约813年-约858年），字义山，号玉溪（谿）生，又号樊南生，祖籍怀州河内（今河南焦作沁阳），出生于郑州荥阳（今河南郑州荥阳市），晚唐著名诗人。</p>
<h2>温庭筠</h2>
<p>温庭筠（约812年-约866年），本名岐，艺名庭筠，字飞卿，男，汉族，唐代并州祁县（今山西省晋中市祁县）人，晚唐时期诗人、词人。</p>
</body>
</html>
“h2:nth-of-type(odd){color:#f09;}”用于将所有h2元素中第奇数行的字体颜色设置为玫红色；“h2:nth-of-type(even){color:#12ff65;}”用于将所有h2元素中第偶数行的字体颜色设置为绿色；“p:nth-last-of-type(2){font-weight:bold;}”用于将倒数第2个p元素的字体加粗显示。
:empty选择器
:empty选择器用来选择没有子元素或文本内容为空的所有元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>empty选择器的使用</title>
<style type="text/css">
p{
width:150px;
height:30px;
}
:empty{background-color:#999;}
</style>
</head>
<body>
<p>11111111111111111<p>
<p>22222222222222222<p>
<p>33333333333333333<p>
<p><p>
<p>55555555555555555<p>
</body>
</html>
:targer选择器
:targer选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）制定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:targer选择器所设置的样式才会起作用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:targer选择器的使用</title>
<style type="text/css">
:target{background-color:#e5eecc;}
</style>
</head>
<body>
<h1>这是标题</h1>
<p><a href="#news1">跳转内容 1</a></p>
<p><a href="#news2">跳转内容 2</a></p>
<p>请单击上面的链接，:target选择器会突出显示当前活动的HTML锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
</body>
</html>
伪元素选择器
特点:获取指定元素中某一部分文本而用的。
1、:first-letter 用于选取指定选择器（元素）的首字母
2、:first-line 用于选取指定选择器（元素）的首行文本
3、::selection 匹配被用户选取的部分
<!DOCTYPE html>
<html>
<head>
<title> 伪元素选择器-:first-letter </title>
<meta charset="utf-8" />
<style>
/*p:first-letter{
font-size:36px;
font-weight:bold;
color:red;
}
div:first-line{
background-color: blue;
}
::selection{
background-color: green;
color:yellow;
}*/
p:first-letter{
color:#999;
font-size:36px;
font-weight:bold;
}
div:first-line{
font-weight:bold;
background-color:red;
}
::selection{
background-color:red;
color:yellow;
}
</style>
</head>
<body>
<p>伪元素选择器</p>
<div id="info">
特点:获取指定元素中某一部分文本而用的。<br>
1、:first-letter <br>
用于选取指定选择器（元素）的首字母 <br>
2、:first-line <br>
用于选取指定选择器（元素）的首行文本 <br>
3、::selection <br>
匹配被用户选取的部分 <br>
</div>
</body>
</html>
连接伪类
通过链接伪类可以实现不同的链接状态
| 超链接标记的伪类 | 含义 |
|---|---|
| a:link{css样式规则;} | 未访问时超链接的状态 |
| a:visited{css样式规则;} | 访问后超链接的状态 |
| a:hover{css样式规则;} | 鼠标经过，悬停时超链接的状态 |
| a:active{css样式规则;} | 鼠标单击不动时超链接的状态 |
注意：
1、同时使用链接的四种伪类时，通常按照a:link、a:visited、a:hover、a:active的顺序书写，
否则定义的样式可能不起作用
2、除文本样式，链接伪类还常常用于控制超链接的背景，边框等样式
若有收获，就点个赞吧
0 人点赞
