后代选择器
/* 以下两种写法叫做子代选择器，第一个元素不管是标签名还是类名，都作为其代表标签，也是该选择器的最高级别（父类），然后向下搜寻，搜寻到底 */ /* 会使所有 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>
来源：https://www.cnblogs.com/zhang188660586/p/12570399.html