css基础——常用选择器

最新推荐文章于 2024-10-07 17:45:00 发布

蜗牛式学编程

最新推荐文章于 2024-10-07 17:45:00 发布

阅读量103

点赞数

分类专栏： # html/css 学习笔记文章标签： html css3

本文链接：https://blog.csdn.net/weixin_45556926/article/details/114137806

版权

html/css 学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>常用选择器</title>
    <style type="text/css">
        /* 为页面中的所有p标签，设置一个字体颜色为红色 */

        /*
            *元素选择器
            *	作用：通过元素选择器可以选择页面中的所有元素
            *	语法：标签名{}
            *
        */

        /*p{
                color:red;
            }

            h1{
                color:red;
            }*/

        /*
            * id选择器
            *	作用：通过元素的id属性值选中唯一的一个元素
            *	语法：#id属性值{}
        */
        /*#p1{
                font-size: 20px;
            } */

        /*
            * 类选择器
            *	作用：通过元素的class属性值选中一组元素
            *	语法：.class属性值{}
        */
        .p2 {
            color: red;
        }

        .hello {
            font-size:50px;
        }

        /*
            为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景为黄色

            选择器分组（并集选择器）
                - 通过选择器分组可以同时选中多个选择器对应的元素
                - 语法：选择器1，选择器2，选择器N{ }
        */
        #p1,.p2,h1{
            background-color:yellow;
        }

        /*
            通配选择器
                - 它可以用来选中页面中所有的元素
                - 语法： *{ }
        */

        /*
            为拥有class p3 span元素设置一个背景颜色为黄色

            复合选择器（交集选择器）
                - 作用：可以选中同时满足多个选择器的元素
                - 语法：选择器1选择器2选择器N{ }
        */

        span.p3{
            background-color:yellow;
        }
    </style>
</head>
<body>

    <h1>你好</h1>
    <p>锄禾日当午</p>
    <p id="p1">锄禾日当午</p>
    <!--
        我们可以为元素设置class属性，
            class属性和id属性类似，只不过class属性可以重复
            拥有相同class属性值的元素，我们说他们是一组元素
            可以同时为一个元素设置多个class属性值，多个值之间用空格隔开
    -->
    <p class="p2 hello">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p class="p3">锄禾日当午</p>
    <span class="p3">汗滴禾下土</span>
</body>
</html>