• CSS选择器分类( 通配符、标签选择器、id选择器、类选择器)


     <style>

            /* 通配符   *就表示所有元素 */

            *{

                margin: 0;

                padding: 0;

            }

            /* 标签选择器  所有的标签,都可以是标签选择器,比如ul、li、label、dt、dl、input....*/

            /* 以表签名,命名的选择器,叫做标签选择器,无论页面中span标签出现在哪里,它都能修饰到*/

           span{

            color: aqua;

           }

           li{

            list-style-type: none;

           }

           a{

            color: #555;

            text-decoration: none;

           }

           a:hover{

            color: #df2d2d;

            text-decoration: underline;

           }

           header{

            width: 100%;

            height: 120px;

            background-color: aquamarine;

           }

        </style>

    </head>

    <body>

        <p>前端与移动端开发<span>2班</span></p>

        <p>WEB前端开发<span>2班</span></p>

        <p>H5前端开发<span>2班</span></p>

        <div>

            <span>小芮</span>你好

        </div>

        <ul>

            <li>

                <ul>

                   <li>你好<span>小芮</span></li>

                </ul>

            </li>

        </ul>

        <a href="https://www.baidu.com">百度</a>

        <a href="https://www.youku.com">优酷</a>

        <a href="">爱奇艺</a>

        <header>我是页面头部区域标签</header>

    </body>

    效果图:

     <style>

            /* #----id选择器

            标签中最常用的四大属性是`id`, `class`, `title`, `style`这四个属性,几乎每个html标签都会有, 需要特别关注*/

            /* 原则:

    这个标签的名字,可以任取,但是:

    1) 只能有字母、数字、下划线、连接线

    2) 必须以字母开头

    3) 不能和标签同名。比如id不能叫做body、img、a */

    /* 在实际网页布局中,给id属性写值,不能写 a1----a100。你给这个id属性里写的值,要具有语意性。

    一个HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的! */

            #a1{

                 color: orange;

            }

            #a-1{

                color: blue;

            }

            #a_1{

                color: blueviolet;

            }

           

            .con{

                color:  pink;

            }

            .f30{

                font-size: 30px;

            }

            .line{

                text-decoration: underline;

            }

        </style>

    </head>

    <body>

        <p id="a1">我是段落标签</p>

        <p id="a-1">我是段落标签</p>

        <p id="a_1">我是段落标签</p>

        <!-- /* .  类选择器 */   .就是类的符号。类的英语叫做class  任何的标签都可以携带class属性-->

        <p class="con">我是小芮</p>

        <p>我是小芮</p>

        <p class="con">我是小芮</p>

        <!-- 特点1:class属性可以重复,比如,页面上可能有很多标签都有con这个类 -->

        <!--特点2: 同一个标签可以同时携带多个类,类与类之间,用空格隔开 -->

        <p class="con f30 line">我是小芮</p>

        <!-- 特别提醒:页面布局中,尽可能的用class,除非极特殊的情况可以用id

         id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果 -->

    </body>

    效果图:

  • 相关阅读:
    Spring Boot MyBatis Plus 配置数据源详解
    SystemC入门学习-第3章 数据类型
    17、Flink 之Table API: Table API 支持的操作(1)
    从路由器真机提取固件包(二)
    docker&kubernets篇(九)
    Abbkine AbFluor 488 细胞凋亡检测试剂盒特点及实验建议
    半小时制作简单版澳大利亚导游地图,太简单了,你也可以
    Servlet 中的 RequestDispatcher
    使用 TiUP 部署 TiDB 集群
    1.7 列表和字符串切片(Python)
  • 原文地址:https://blog.csdn.net/m0_71814235/article/details/125486308