css样式

css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>yuan</p>
<div>yuan</div>
yuan <span>yuan</span>

</body>
</html>

class选择器有多个值(样式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i2{
            font-size: 10px;
            font-weight: 100;
        }
        #i1{
            font-size: 100px;
            font-weight: 900;
        }
        .c1{
            color: red;
        }
        .c2{
            background-color: lightgray;
        }

        .c3{
            background-color: lightblue;

        }
        .c4{
            color: red;
            font-size: 50px;
            font-style: italic;
        }
        .c5 .abc{
            color:rebeccapurple;
        }
        p{
            color: red;
        }
        .c10{
            color: blue;
        }
        p{
            color: red;
        }
        .c9 .c10{
            color: green;
        }
        .c8 .c9 .c10{
            color: gray;
        }
        .c7 .c9 .c10{
            color: gold;
        }

        #i3{
            color: brown;
        }
        .c10{
            color: pink !important;
        }
    </style>
</head>
<body>

<div id="i1">yuan</div>
<div id="i2">yuan</div>

<ul>
    <li>张三</li>
    <li class="c1">李四</li>
    <li class="c1">王五</li>
    <li class="c1">赵六</li>
    <li>赢七</li>
</ul>
<div class="c2 c4">AAA</div>
<div class="c3 c4">BBB</div>


<div class="c5">
    <div class="abc">CCC</div>
    <div>
        <div>
            <div class="abc">xxx</div>
        </div>
    </div>
</div>

<div class="c6">
    <div class="abc">DDD</div>
</div>



<div class="c7">
    <div class="c8">
        <div class="c9">
            <p class="c10" id="i3">123</p>
        </div>
    </div>
</div>





</body>
</html>
  •  选择器的同一级的优先级是谁在下边听谁的；优先级限制越高听谁的。
  • id >class >标签名
  • 有id不比较class,有class不比较标签名

 

 

posted @ 2023-05-19 09:24  卡卡罗安  阅读(10)  评论(0)    收藏  举报