css1.常用选择器

最新推荐文章于 2023-03-06 09:00:00 发布

时光无错孤独难谈

最新推荐文章于 2023-03-06 09:00:00 发布

阅读量74

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104291838

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用选择器</title>
        <style type="text/css">
            /* 
                元素选择器
                    作用:通过元素选择器选中页面所有指定元素
             */
            p{
                color: blueviolet;
            }
            h1{
                color: cadetblue;
            }
            /* 
                id选择器:
                    通过id选择唯一的元素
                    语法:
                        #id属性值{}
            */
            #pp{
                color: rgb(255, 166, 0);
                font-size: 900px;
            }
            /* 
                类选择器
                    通过class选择一组元素
                    语法:
                        .class属性值{}
            */
            .p2{
                color:darkcyan ;
            }

            /* 
                为id为p1,class为p2还有h1，设置背景颜色
            */
            /* 
                并集选择器
                选择器分组，可以同时选中多个选择器对应的元素
                语法:
                    选择器1，选择器2，选择器N{}
             */
            #pp,.p2,h1{
                background-color: bisque;
            }

            /* 
                通配选择器:选择页面所有元素
                    语法: *{}

                    *{
                        color: red;
                    }
             */

             /* 
                   为class为p3的span元素设置背景

                   交集（复合）选择器:
                    作用:
                        可以选择同时满足多个选择器的元素
                    语法:（要满足N个条件才被选择）
                        选择器1选择器2选择器N{}
             */
             span.p3{
                 color: darkgoldenrod;
             }

             /* 
                后代元素选择器
                    作用:选中指定元素的后代
                    语法:祖先元素 后代元素{}
              */
              div span{
                  color: aqua;
              }

              /* 
                子元素选择器:
                    作用:选中指定父元素的子元素
                    语法:选中指定父元素的指定子元素
               */
               div > span{
                   background-color: aqua;
               }
        </style>
    </head>

    <body>
        <h1>锄禾</h1>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <p id="pp">锄禾日当午</p>
        <p>锄禾日当午</p>
        <!-- 
            class属性和id属性类似，class可以重复
            可以为同一个元素设置多个class属性值，用空格隔开

         -->
        <p class="p2 hello">锄禾日当午</p>
        <p class="p2">锄禾日当午</p>
        <p class="p2">锄禾日当午</p>
        <p class="p3">锄禾日当午</p>
        <span class="p3">123312</span>

        <div>
            <span>ahdahkdla</span>
        </div>
        <span>askdaldlka</span>
    </body>
<!-- 
    选择器的优先级:
        当使用不同的选择器，选中同一个元素，设置相同的样式，样式之间产生了冲突

        优先级:（可以在样式最后添加  !important  样式优先级超过内联样式）

            内联样式：  优先级 1000（<p style="coloe="yellow"></p>"）
            id选择器：  优先级 100
            类和伪类：  优先级 10
            元素选择器：优先级 1
            通配选择器：优先级 0
            继承的样式：优先级 无

            当选择器包含多种选择器，将选择器优先级相加
                ps:选择器优先级不会超过他的最大数量级
                    选择器优先级相同，谁在后选择谁
                    并集选择器优先级独立计算
 -->

</html>

时光无错孤独难谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css1.常用选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> /* ...
复制链接

扫一扫