黑马CSS第四讲

最新推荐文章于 2024-07-31 14:35:30 发布

Beatmyselfonce

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量92

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_74202561/article/details/134744447

版权

今天讲几个选择器，这节网页没有前几个那么华丽，但是这也是为了后面学习打好基础，希望大家不要感到枯燥，学习的过程就是这，不乱毒鸡汤了hhhh上代码

后代选择器！！！

<!-- 后代选择器 -->
<!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 span {
            color: red;
        }
    </style>
</head>

<body>
    <span>span标签不变色情况</span>
    <div>
        <span>这是div的儿子span</span>
        <p>
            <span>孙子span</span>
        </p>
        <br><br>
    </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>Document</title>
    <!-- div的儿子span文字颜色是红色 -->
    <style>
        div>span {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <span>儿子span</span>
        <p>
            <span>孙子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>Document</title>
    <style>
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div>div标签</div>
    <p>p标签</p>
    <span>span标签</span>
</body>

</html>

<!-- 交集选择器 就是找那些标签和属性都一样的给他们设定效果 -->
<!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>
        p.box {
            color: red;
        }
    </style>
</head>

<body>
    <p class="box">p标签，使用了类选择器 box</p>
    <p>p标签</p>
    <div class="box">div 标签，使用了类选择器</div>
</body>

</html>