python之前端css样式（一）

news2025/12/14 0:10:52

css

ID选择器

#c1{
    color:red;
    #边框为红色
    border:1px solid red;
}
<div id="c2">中国移动</div>

类选择器

.xx{
    color:blue;
}
<div class="xx">中国联通</div>

标签选择器

li{
    color: pink;
}
<ul>
        <li>北京</li>
        <li>上海</li>
        <li>山东</li>
    </ul>

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

        .xx{
            color: dodgerblue;
        }

        #c2{
            color: aqua;
        }
        li{
            color: pink;
        }
    </style>
</head>
    <div class="xx">中国联通</div>
    <div id="c2">中国移动</div>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>山东</li>
    </ul>
</body>
</html>

属性选择器

 .v1[xx="123"]{
            color: blueviolet;
        }
<div class="v1" xx="123">hellow world</div>
<div class="v1" xx="456">hellow world</div>
<div class="v1" xx="789">hellow world</div>

后代选择器

li{
    color: pink;
}
<ul>
   <li>北京</li>
   <li>上海</li>
   <li>山东</li>
    </ul>
#此时只有class="yy"的标签会变色，上面的不变
.yy li{
    color: pink;
}
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>山东</li>
    </ul>
<ul class="yy">
    <li>北京</li>
    <li>上海</li>
    <li>山东</li>
     </ul>

#只找儿子
.zz>a{
    color: aqua;
}
<div class="zz">
    <a>meli</a>
        <div>
            <a>hellw</a>
        </div>
</div>
#找所有的后代
.zz a{
    color: aqua;
}
<div class="zz">
    <a>meli</a>
        <div>
            <a>hellw</a>
        </div>
</div>

.xx{
    color: dodgerblue;
}
.v1{
    color: blueviolet;
font-size: 280px;

<div class="xx v1">中国联通</div>
先满足属性xx,再满足v1，重复时满足最下面的
若不想覆盖，在第一个后面加!important;
.xx{
   color: red !important;
}

文字水平居中