python之前端css样式（一）

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;
}

文字水平居中