CSS复合选择器

Liberty'

于 2024-03-25 21:28:29 发布

阅读量450

点赞数 12

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/Queen741740155/article/details/137024810

版权

本文详细介绍了CSS中的复合选择器，包括后代选择器、子选择器、并集选择器和伪类选择器，以及它们如何提高代码效率和页面样式管理。通过实例展示了如何使用这些选择器来精确控制元素样式，提升用户体验。

摘要由CSDN通过智能技术生成

复合选择器在CSS中扮演着非常重要的角色，它允许开发者通过组合不同的选择器来更精确、更高效地选择目标元素（标签）。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的，常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等。

使用复合选择器可以大大提高CSS代码的可读性和可维护性，同时也能减少代码的冗余。通过精确选择目标元素，开发者可以更有效地控制页面的样式表现，提升用户体验。

后代选择器

后代选择器：后代选择器又称为包含选择器，可以选择父元素里的子元素。其语法是元素1 元素2 {样式声明}，其中元素1是父级元素，元素2是子级元素，中间用空格隔开。这样，就可以选择元素1内部的所有元素2（包括孙子元素等）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        ol li {
            color: red;
        }

        ul li a {
            color: black;
        }


        .nav li a {
            color: green;
        }
    </style>
</head>

<body>
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li><a href="#">百度一下</a></li>
    </ul>

    <ul class="nav">
        <li>4</li>
        <li>4</li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">百度一下</a></li>
    </ul>
</body>

</html>

子元素选择器

子选择器：子选择器只能选择作为某元素的直接子元素。其语法是元素1>元素2 {样式声明}，其中元素1是父级元素，元素2必须是元素1的直接子元素。这种选择器不会选择孙子元素等更深层次的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .nav>a {
            color: red;
        }

        .nav>p>a {
            color: green;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

并集选择器

并集选择器：并集选择器可以选择多组标签，并为它们定义相同的样式。其语法是元素1,元素2 {样式声明}，其中元素1和元素2是用逗号分隔的，它们将共享同一组样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 把熊大熊二改为红色 */
        div,
        p {
            color: red;
        }

        /* 把光头强和小猪佩奇一家改为粉色 */
        span,
        .pig li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>佩奇</li>
        <li>乔治</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

伪类选择器

伪类选择器：伪类选择器用于选择HTML元素的特定状态，例如:hover用于选择鼠标悬停时的元素，:active用于选择被用户激活的元素等。伪类选择器可以与基础选择器或复合选择器结合使用，以实现更复杂的样式效果。

链接伪类选择器

:hover：当用户将鼠标悬停在元素上时，选择该元素。

a:hover {  
  color: red;  
}

:active：当用户与元素进行交互（如点击）时，选择该元素。

button:active {  
  background-color: gray;  
}

:link 把没有点击过的链接选出来

 a:link {
            color: black;
         
        }

:visited：选择用户已访问过的链接。

a:visited {  
  color: purple;  
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.未访问的链接a:link  把没有点击过的链接选出来。 */
        a:link {
            color: black;
            text-decoration: none;
        }

        /* 2. a:visited 选择点击过的链接 */
        a:visited {
            color: orange;
        }

        /* 3.a:hover 选择鼠标经过的链接 */
        a:hover {
            color: blue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>

</body>

</html>

:focus：选择获得焦点的元素（例如，用户点击输入框时）。

input:focus {  
  border: 2px solid blue;  
}

  <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</body>