CSS 复合选择器、CSS特性、背景属性、显示模式

技术拾荒者

已于 2024-09-09 12:04:22 修改

阅读量454

点赞数 4

文章标签： css 前端

于 2024-09-09 10:51:22 首次发布

本文链接：https://blog.csdn.net/weixin_53720617/article/details/142052579

版权

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器子选择器 { CSS 属性}，父子选择器之间用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        div span{
            color: red;
        }
    </style>
</head>
<body>
    <span>这是一个span</span>
    <br><br>
    <div>
        <span>这是div 的儿子span</span>
        <p>
            <span>这是div 的孙子span</span>
        </p>
    </div>
</body>
</html>

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器</title>
    <style>
        div>span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>这是儿子 span </span>
        <p><span>这是孙子 span</span></p>
    </div>
</body>
</html>

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        p,
        span,
        h2{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个P标签</p>
    <span>这是一个span 标签</span>
    <h2>这是一个H2 标签</h2>
</body>
</html>

交集选择器 – 了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        p.box{
            color: red;
        }
    </style>
</head>
<body>
    <p class="box">p标签，使用了类选择器。</p>
    <p>p 标签</p>
    <div class="box">div 标签，使用了类选择器。</div>
</body>
</html>

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover { CSS 属性 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style>
        /* 任何选择器都可以加 hover 伪类选择器  */
        a{
            text-decoration: none;
        }

        a:hover{
            color: red;
        }

        .box:hover{
            color: green;
        }

    </style>

</head>
<body>

    <a href="#">a 标签</a>

    <div class="box">div 标签</div>
    
</body>
</html>

伪类-超链接（拓展）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接伪类</title>
    <style>
        a{
            color: darkgoldenrod;
        }
        a:link{
            color: aqua;
        }
        a:visited{
            color: beige;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: blue;
        }
    </style>
</head>
<body>
    <a href="#">这是一个a标签！</a>
</body>
</html>