CSS的复合选择器

最新推荐文章于 2024-10-01 23:20:42 发布

寒涵含

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量706

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_73625238/article/details/136381069

版权

（一）什么是复合选择器

在CSS中，把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器上的，由基础选择器组合而成。

a.复合选择器可以更加精准高效的选择目标元素

b.复合选择器由俩个或多个基础选择器，通过不同方式组成

c.常用的复合选择器：后代选择器，子选择器，并集选择器，伪类选择器等

（二）后代选择器

后代选择器（包含选择器），通过父类，子类的顺序来确定标签

语法：

元素1（父类） 元素2（子类）{ 样式声明}

例如：

ul li{演示声明}/*选择ul里面所有的li标签元素*/

a.元素1和元素2中间空格

b.最终选择为子类元素2

c.后代可以是父类子类孙类等等

d.元素1，元素2 可以是任意基础选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li {
            color: red;
        }

        .lll li {
            color: blue;
        }
        .lll li a {
            color: black;
        }
    </style>
</head>

<body>
    <ol>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ol>
    <ul class="lll">
        <li>456</li>
        <li>456</li>
        <li><a href="111">1234</a></li>
    </ul>
</body>

（三）子类选择器（重点）

子元素选择器（子选择器），直接叫亲儿子选择器（最近一级元素）

语法：

元素1>元素2 {样式声明}

上述效果：与后代选择器不同与爸爸只能选定儿子，不能选定相同标签名的孙子

（四）并集选择器（重点）

并集选择器可以选择多组标签，共同定义它们的样式。

语法：

元素1,
元素2 {样式声明}

注意：

1.英文逗号隔开（相当于和的意思）

2.常用于集合声明

3.规范为并排写

（五）伪类选择器

伪类选择器，为选择器添加特殊发效果，比如链接添加特殊效果，或选择第一个，第n个元素

伪类选择器需要使用“：”（冒号）表示，比如 :hover , :first-child.

伪类选择器有：链接伪类，结构伪类等，通常是链接伪类选择器

属性：

<style>
        a {
            text-decoration: none;
        }
        /* 未被访问过的链接显示 */
        a:link {
            color: black;

        }
        /* 被点击过的链接 */
        a:visited {
            color: red;
        }
        /* 选择鼠标经过链接时 */
        a:hover {
            color: blue;

        }
        /* 当点击不动时 */
        a:active {
            color: blueviolet;
        }
    </style>

注意事项：

1.确保按照顺序来书写 :link -:visted-:hover-:acive

2.给链接指定样式要单独使用

（六）:focus伪类选择器

:focus伪类选择器用于获得焦点（光标）的表单样式

一般<input>类表单元素使用：

语法：

<style>
        input:focus {
            background-color: yellow;
        }
    </style>

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	父子孙	多	空格
子代选择器	选择子代元素	父子	多	大于号（>）
并集选择器	选择相同元素	整体声明	多	逗号（,）
链接伪类选择器	选择不同状态链接	链接	多	牢记：（LVHA）
:focus选择器	选择获得光标的表单	表单	少	input:focus