css提供了几种复合选择器

3.元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

示例
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>
.nav a {        /* 后代选择器 */
    color: red;}.nav>a {        /* 子选择器 */
    text-decoration: none;}
三、并集选择器
??并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。并集选择器是各选择器通过英文逗号（ , ）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法
元素1,元素2 {样式声明}
上述语法表示选择元素1 和元素2。

注意

1.元素1 和元素2 中间用逗号隔开
2.逗号可以理解为和的意思
3.并集选择器通常用于集体声明

示例
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪猪侠</li>
    </ul>
</body>
div,p,ul li{
    color: blue;
}
四、伪类选择器
??伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号( : )表示，比如 :hover（鼠标经过时）、 :first-child （选择第一个孩子）。伪类选择器有很多，比如有链接伪类、结构伪类等，这里先总结常用的链接伪类选择器。

语法
a: link			/* 选择所有未被访问的链接 */
a: visited	/* 选择所有已经被访问的链接 */
a: hover		/* 选择鼠标指针位于其上的链接 */
a: active		/* 选择活动链接（鼠标按下但未弹起的链接） */
注意

1.为了确保生效，请按照 LVHA 的循顺序声明：link–visited–hover–active。顺序颠倒可能会失效。
2.因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
3.实际工作中，只需要写一个链接的状态和鼠标经过的状态。

示例
<body>
    <a href="#">打工人</a><br />
    <a href="#">努力做个技术人</a>
</body>
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color:blue;
    text-decoration: underline;
}
??:focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

语法
input:focus {
	background-color: yellow;
}
示例
<body>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
</body>
input:focus {
    background-color: red;
}
五、复合选择器总结选择器作用特征使用情况隔开符号后代选择器选择后代元素子孙后代都可以较多空格 .nav a 子代选择器选择最近一级子元素只选亲儿子较少大于号 .nav>p 并集选择器选择多个元素用于集体声明较多逗号 .nav,p,a 链接伪类选择器选择不同状态的链接跟链接相关较多冒号 a:hover :focus 选择器选择获得光标的表单跟表单相关较少冒号 input:focus
推荐学习：css视频教程
以上就是css提供了几种复合选择器的详细内容！

查看更多关于css提供了几种复合选择器的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did32191

更新时间：2022-09-19 阅读：53次