四、选择器进阶
一）后代选择器：空格
作用:根据 HTML 标签的嵌套关系,选择父元素后代中满足条件的元素（在选择器1所找到标签的后代(子、孙子、重孙子.)中,找到满足选择器2的标签,设置样式）
选择器语法:选择器1 选择器2{ css } 注意点: 1.后代包括:儿子、孙子、重孙子… 2.后代选择器中,选择器与选择器之前通过空格隔开
祖先元素 后代元素{声明块}
如：
html中：
<div>
<section class="zhouxu">
<p>周而不比，身若飞絮</p>
</section>
</div>
复制代码如果想选中p元素，那么既可以用 .zhouxu>p{@@},也可以用 section p{@@}，
还可以用 div p{@@}
二）子代选择器：>
作用:
根据 HTML 标签的嵌套关系,选择父元素子代中满足条件的元素。
（在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式）
格式：父元素>子元素{声明块（属性）}
选择器1>选择器2{ css }
注意：
1.只能一级一级选择，不能跳级；查找非常精确
2.子代只包括:儿子
3.子代选择器中,选择器与选择器之间通过>（大于号）隔开
三）并集选择器：
作用:
同时选择多组标签,设置相同的样式（同时选中多个选择器的内容）（选择器的组合，可以选中多种元素）
选择器语法:选择器1, 选择器2{ cSs }
a,h1,.zhouxu{color: aqua;font-size: 20px;font-weight:bold;}
复制代码注意点:
- 并集选择器中的每组选择器之间由英文逗号'","'分割
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器，如有类选择器则在逗号后跟 .类名 即可选中
- 并集选择器中的每组选择器通常一行写一个,提高代码的可读性
四）伪类选择器
1. a标签配套的伪类选择器（状态式伪类选择器）
1）a:link
(从未被访问过)(在谷歌浏览器中不生效)
2）a:visited
(被访问过后)
3）a:hover
(鼠标悬停状态\不只可以用于a标签,还可用于其他标签)
4）a:active
(鼠标长按状态)
/* 访问前 */（从未被访问过）
a:link{color: blue}
意为：当未点击链接时，字体显示为蓝色
(当它的属性值为空值时，不生效；即在html中的a元素中，没有输入跳转路径时，此属性不显示)
/* 访问后 */
a:visited{color: black}
意为：当点击链接跳转页面后再返回时，文字显示为黑色
/* 鼠标移入时 */
a:hover{color: brown}
意为：当鼠标移到该链接上方时，文字显示为棕色（不用点击）
/* 鼠标点击时的一瞬间 */
a：active{color: aqua}
意为：当鼠标点击时的一瞬间，该链接文字颜色显示为浅蓝色
复制代码注意： a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
5）伪类和 CSS 类结合使用：
例1：（同div一起使用时）
在HTML中：
在css中：
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
复制代码意为：原div块中背景色为绿色，当鼠标移动到div块里时（悬停状态），div块的背景色则变为蓝色。
例2：（把鼠标悬停到<div>元素以显示 <p> 元素（类似工具提示的效果）
在html中：
<div>鼠标移到我上面来显示 p 元素
<p>哈哈！我在这里！</p>
</div>
复制代码在css中：
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
复制代码意为：当鼠标悬停在<div>块区域中时，会显示影藏的<p>段落。
2. first-child/last-child （结构式伪类选择器）
1）普通用法：
如在HTML中：
<div>
<p>周而不比，身若飞絮</p>
<p>周而不比，身若飞絮</p>
<p>周而不比，身若飞絮</p>
<p>周而不比，身若飞絮</p>
<p>周而不比，身若飞絮</p>
</div>
复制代码选中其中的第一个p元素：
div>p:first-child { color: blue}
复制代码选中其中的最后一个p元素：
div>p:last-child {color: blueviolet}
复制代码2）匹配所有<p>元素中的首个<i>元素：
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
复制代码如需将其中每句的第一个“中国”字体变红，则：
p i:first-child {color: blue;}
复制代码3）匹配所有首个<p>元素中的所有 <i> 元素
在html：
<div>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
</div>
<div>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
<p>我爱<i>中国</i>。我爱<i>中国</i></p>
</div>
复制代码在css：
p:first-child i {
color: blue;
}
复制代码意为：将每个div中的第一个p元素中的第一个i元素字体颜色改为蓝色。
3.：nth-child（）
意为：匹配父元素里的第n个子元素
1）括号里直接写数字：
例：
html中：
<section>
<p>我自迎接汝</p>
<p>我自迎接汝</p>
<p>我自迎接汝</p>
<p>我自迎接汝</p>
<p>我自迎接汝</p>
</section>
复制代码css：
p:nth-child(4){color: brown}
复制代码意为：匹配父元素中的第四个p元素
2）奇数/偶数（odd/even）
p:nth-child(odd){color: brown}
复制代码意为：匹配父元素中的奇数个p元素（1.3.5.7.9.......)
p:nth-child(even){color: brown}
复制代码意为：匹配父元素中的偶数个p元素（2.4.6.8......）
3）括号里写公式（an+b）
p:nth-child(3n+1){color: brown}
复制代码意为：匹配父元素中3n+1数个的p元素（n从0开始，即显示1.4.7.10......）
4.：nth-of-type
意为：匹配父元素中指定类型元素的第n个子元素
如：
HTML中：
<section>
<h6>我自迎接汝</h6>
<p>我自迎接汝</p>
<p>我自迎接汝</p>
<p>我自迎接汝</p>
<p>我自迎接汝</p>
<p>我自迎接汝</p>
<h6>我自迎接汝</h6>
<p>我自迎接汝</p>
<h6>我自迎接汝</h6>
<h6>我自迎接汝</h6>
<p>我自迎接汝</p>
</section>
复制代码css中
h6:nth-of-type(3){color: blue}
复制代码意为：将section中的第三个h6元素颜色设为蓝色
5.：not 不选中
<div class="notttt">
<span>01</span>
<span class="not">02</span>
<span>03</span>
<span>04</span>
<span>05</span>
<span class="not">06</span>
<span>07</span>
<span>08</span>
</div>
复制代码.notttt>span:nth-child(2n){
color: #46a7ad;
}
复制代码显示：
.notttt>span:nth-child(2n):not(.not){
color: #46a7ad;
}
复制代码显示：
五）伪元素选择器
1. :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容并设置新内容的样式，在选择器中用content属性添加内容。
：：before 在之前
如：
2. :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
：：after 在之后
元素名：：after{content：“加在之后”；}
3. :first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
：：first-letter 在首字母
4. :first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
：：first-line 在第一行（可用于大写首字母）
5. :selection 伪元素
：：selection 用户选中的内容（选中之后的效果）
如---------------------------------------------------------------------
<h5>这是一段文本</h5>
复制代码h5::selection{color:skyblue;}
复制代码即当用户用鼠标选中h5文字部分时，h5中的字体颜色为天蓝色
六）伪类选择器和伪元素选择器
1.两者的意思：
*伪类选择器：
伪类，就是伪造一个类别，然后为这个类别设置CSS样式。用于定义元素的特殊状态。
（虽然是“伪造”的，但伪类选择器也是css内置的，有固定的选择及其意义）
*伪元素选择器：
伪类元素指的是为被选择的标记（标记中的文本）伪造一个元素，然后为这个伪造的元素设置样式。
2.两者的异同：
1）同：
css伪类选择器和伪类元素都是以冒号开头，
伪类选择器前面用一个冒号。（如，：hover、：first-child........）
伪类元素选择器前面用两个冒号。（如，：：frist-letter、：：before.......）
2）异：
伪类是通过伪造类，从而为这个类设置样式；
而伪元素是通过伪造元素，从而为这个元素设置样式
