css的层次关系优先级，以及命名规范。

最新推荐文章于 2024-09-10 22:55:28 发布

Skkkkk.

最新推荐文章于 2024-09-10 22:55:28 发布

阅读量180

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/dhshsness/article/details/139257531

版权

在任何的代码中，都是需要有一定的层次关系的。

css的继承和层叠：css继承父元素设置样式,子元素可以继承

css层叠可以定义多个样式,不冲突的时候多个样式层叠冲突时按优先级

css选择器优先级：id选择器>class选择器>标签选择器

css优先级规则：统一样式表中权值相同才用就近权值不同权值高用那种(通配符权值为0 行内1000 id100 类跟伪类10 标签1)

css权值优先级：!important 调整样式优先级

  h1{
            color: brown;
            background-color: blue;
            width: 60px;
            height: 60px;
            font-size: 60px;
            font-weight: 100px;
        }
        div{
            width: 100px;
            height: 100px;
            border-radius: 20%;/*圆角弧度*/
        }
        *{
            background-color: aqua;
        }
        /*标签/=1*/
        div{
            background-color: blue;
        }
        /*class/=10*/
        .box{
            background-color: blueviolet;
        }
        /*id/=100*/
        #pox{
            background-color: red;
        }
        /*id/=100*/
        /*#pox{
            background-color:yellow；
        }*/
        /* 字体属性 */
        p{
            background-color: cornflowerblue;
            font-family:Arial, Helvetica, sans-serif ;/*字体改变*/
            font-size: 14px;/*字体大小*/
            font-weight: 300px;/*字体粗细*/
            font-style: italic;/*字体样式*/
        }
        /* 文本属性 */
        p{
            text-align: center;
            text-decoration: none;/*默认没有装饰线*/
            text-indent: 40px;/*文字缩进*/
            line-height: 26px;/*行间距*/
            text-decoration: line-through;/*删除线*/
            text-decoration:underline ;/*下划线*/
        }
        /* 内联样式 */
        .box1{
            color: antiquewhite;
        }
      

    </style>
</head>
<body>
    <!-- 100+10+1+0=111 -->
    <!-- 行内样式 -->
    <div class="box" id="pox">一年之际在于春</div>
    <p>锄禾日当午，汗滴禾下土。</p>
    <!-- 并集选择器之后代选择器 -->
    <div class="ontDom">一日之计在于晨
        <div>锄禾日当午，汗滴禾下土。
            <div>谁知盘中餐</div>

        </div>
    </div>
    
</body>
</html>

在css中，起名字的是不能以数字开头的。

     </div>
            <div class="box3">
                <div class="a">IT</div>
                <div class="a1">金融</div>
                <div class="a2">房地产</div>
                <div class="a3">消费品</div>
                <div class="a4">汽车制造</div>
                <div class="a5">医疗化工</div>
            </div>

像我这些都是用字母开头