html-04 标签选择器

最新推荐文章于 2024-07-20 10:21:33 发布

原创最新推荐文章于 2024-07-20 10:21:33 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #标签

学习专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了CSS中各种选择器的应用方法，包括标签、类、ID选择器等，并通过实例展示了不同选择器如何作用于HTML元素，实现网页样式的精准控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!---->
    <style>
        /*标签选择器*/
        div{
            color: yellow;
        }
        p{
            color: red;
        }
        /*类选择器*/
        .one{
            color: black;
        }
        /*id选择器  唯一*/
        #id{
            color: blue;
        }
        /*并列选择器  或*/
        div,.one{
            background-color: antiquewhite;
        }
        /*复合选择器 与*/
        div.one{
            font-size: 60px;
        }
        /*后代选择器*/
        div p{
            color: blueviolet;
        }
        #q div{
            font-size: 100px;
        }
        /*直接后代选择器*/
        div > p{
            color: brown;
        }
        /*相邻兄弟选择器*/
        div + p{
            color: chartreuse;
        }
        /*属性选择器*/
        div[name]{
            color: cadetblue;
        }
        div[name][age]{
            color: cyan;
        }
        div[name = "ttt"]{
            color: fuchsia;
        }
    </style>
</head>
<body>

    <div name="ttt">tttttttttt</div>
    <div name="yyy">yyyyyyyyyyyyyy</div>
    <div>uuuuuuuuuuuuu</div>
    <div name="iii" age = 56>iiiiiiiiiiii</div>
    <div>
        <p>WWWWWWWWWWW</p>
    </div>
    <p>Eeeeeeeeeeeee</p>
    <p>RRRRrrrrrrrrr</p>
    <div>
        <p>ddsadafaf</p>
        <span>
            <p>12345677654321</p>
        </span>
    </div>
    <div id="q">
        <p>
            <div class="Q">QQQQQQQQQQQQq</div>
        </p>
    </div>
    <div class="one">11111111111111111</div>
    <p class="one">2222222222222</p>

    <div id="id">11111111111111111</div>
    <p>2222222222222</p>

    <div>11111111111111111</div>
    <p>2222222222222</p>
</body>
</html>