后代选择器
/* 以下两种写法叫做子代选择器，第一个元素不管是标签名还是类名，都作为其代表标签，也是该选择器的最高级别（父类），然后向下搜寻，搜寻到底 */
/* 会使所有 ul 里的li标签改变样式
ul li{
color: brown;
} */
/* 这种写法就会让类名为 need 的ul 里的li 元素改变样式
.need li{
color: brown;
}*/
<ul class="need">
<a href="#"> 22222222</a>
<li><a href="#"> 11111111</a></li>
</ul>
子元素选择器
/* 以下方式为子元素选择器，这种方式只会将父元素的儿子辈的元素改变样式，而儿子辈内部的元素则不会被修改样式 */
/* ul>a{
color: green;
} */
<ul class="need">
<a href="#"> 22222222</a>
<li><a href="#"> 11111111</a></li>
</ul>
并集选择器
/* 以下为并集选择器 该选择器，用逗号分隔各个需要渲染的元素，同时还能够跟其他选择器同时使用 */
/* ol,p,ul li>a{
color: pink;
} */
<ul class="need">
<a href="#"> 22222222</a>
<li><a href="#"> 11111111</a></li>
</ul>
<ol>
<li>2222222</li>
</ol>
<p>并集选择器测试</p>
伪类选择器
/* 以下为伪类选择器的测试代码，伪类选择器包含 ①连接伪类选择器，②focus伪类选择器
连接伪类选择器命令：
:hover(鼠标悬浮的时候除法) , :visited（当连接不是第一次被访问的时候触发） ,
:active（鼠标按下未弹起时触发）, :link（当连接还未被访问的时候触发）
注意：连接伪类一定要按照LVHA的顺序来声明，否则将会无效。
focus伪类选择器（用于表单的状态焦点的选择器）：
:focus
*/
div {
text-align: center;
font-size: large;
}
div a:link {
color: #333;
text-decoration: none;
}
div a:visited {
color: red;
}
div a:hover {
color: teal;
text-decoration: none;
}
div a:active {
color: skyblue;
font-size: 50px;
color: black;
}
div input:focus {
border-color: tomato !important;
outline: none;
height: 30px;
}
<div>
<a href="#">伪类选择器测试连接</a>
</div>
<div><input type="text" placeholder="focus伪类选择器测试"></div>