CSS样式应用与选择器优先级解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_64776610/article/details/131707391
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外联式 -->
    <link rel="stylesheet" href="../css/1.css">

    <!-- 内联式 -->
    <style>
        /* 基础样式
        1.wdith 宽
        2.height 高
        3.background-color 背景颜色
        4.list-style：none； 清楚li默认样式
         */

         /* 选择器 */
         /* 通配符 全局选择器 去掉浏览器默认样式 */
         *{
            /* 内边距*/
            /* padding ：0；
            /* 外边距 */
            /* margin：0 */ 
            /* 盒子模型 */
            /* 注释 */
            /* color：red； */
            
         }
         /* 标签选择器
         h1——h6 div ul li span
         */
         p{
            background-color: rgb(red, green, blue);
            color: #6a2121;
        }
        /* 类选择器 */
        .classname{
            height: 300px;
            background-color: #6a2121;
        }
        .red_color{
            color: red;
        }
        /* id选择器
        注意：id名 不能重复
        */
        #idname{
            width: 400px;
            background-color: white;

        }
        p{
            background-color: pink;
        }
        /* 群组选择器 */
        .div,.div2,.div3,p{
            width: 400px;
        }
        .div1{
            height: 100px;
            background-color: chocolate;
        }
        .div2{
            height: 200px;
            background-color: rgb(164, 221, 91);

        }
        .div3{
            height: 300px;
            background-color: rgb(11, 108, 101);
        }

        /* 层级选择器 
        1.子代选择器 >
        2.后代选择器 空格
        */
        .ulBig > li{
            list-style: none;
            font-size: 28px;

        }
        .ulBig li{
            list-style: none;

        }
        /* 层级选择器
        1.兄弟选择器 相邻兄弟+ 中修改它下面的相邻的选择器
        2.兄弟选择器 通用兄弟~ 修改它后面的所有选择器
        */
        .li4{
            color: red;
        }
        .li4+li{
            color: red;
        }
        .li4~li{
            color: red;
        }
        /* 伪类选择器

            ：hover 鼠标悬浮
        */
        .li4:hover{
            color: blue;
            /* 鼠标变小手 */
            cursor: pointer;

        }
        .li3:hover{
            cursor: pointer;
        }
        .li3:hover li{
            color: blue;

        }

        /* 优先级
            1000 ！important 设置最高优先级 一般不建议使用，改源码时可用

            *优先级最低 <1
            p标签选择器<10
            .class类选择器<100
            #id id选择<200
            link 行内引入<
            ！important

            .class< #id
        

            组合选择器是，按优先级顺序叠加，谁大谁生效
        */
    </style>
</head>
<body>
    <!--引入方式
        1.行内引入
        <p style="background-color: blue;color: red;font-size: 120px;"></p>
        2.内联式
        3.外联式

        优先级:
        行内引入方式 优先级最高
        内联式和外联式 谁在后谁生效(原理代码自上而下咨询,后面的把前面的覆盖了)

     -->
     <h1 style="background-color: pink;">这是标题标签</h1>
     <p title="这是title" class="">这是<span class="red_color">段落</span>标签</p>
     <p class="classname" id="idname" style="background-color: aqua;">这是另一个段落标签</p>
     <div class="div1">
        <div class="box1">dddddddd</div>
    </div>
    <div class="div2">ddddd</div>
    <div class="div3">ddddd</div>

    <ul class="ulBig">
        <li>这叫无序列表</li>
        <li class="li2">这叫无序列表</li>
        
        <li class="li3">1
                <li>这叫无序列表222</li>
                <li>这叫无序列表222</li>
                <li>这叫无序列表222</li>
                <li>这叫无序列表222</li>
                <li>这叫无序列表222</li>
        </li>
        <li class="li4">这叫无序列表</li>
        <li>这叫无序列表</li>
        <li>这叫无序列表</li>

    </ul>
 
</body>
</html>
CSS基础样式、选择器
