本文深入探讨CSS层叠样式表的基本概念，包括层叠性、背景标签、行内块标签、继承性、特殊性及权重计算原则。通过具体实例，讲解如何解决样式冲突，理解ID选择器、伪类选择器的优先级，以及如何利用这些特性进行网页布局设计。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
* 层叠性：
* 这里写了两个div块，
* 但是这个明显是冲突的。
* 那么，后面的块里对应的属性，
* 就会将前面块里面的属性覆盖掉。
*/
div{height:100px;
width:100px;
background-color: #f00;
text-align:center;
/*
* inline叫内联，
*即将块标签转换成行内标签。
*/
display:inline;
}
div{
background-color:#008000;
}
/**
* 背景标签：
*（这里我们要注意的是，
* 不换行的标签叫行内标签。
* 换行的叫块标签。）
*/
span{background-color: #0ff;
width:100px;
height:100px;
/*span不是块标签，
* 我们可以用下面的方式，
* 将其转换成块标签
*/
display:block;}
/**
* 行内块标签：
* 可以改变块与块之间的间距，
* 或在期间做一些装饰，
* 但是并不换行。
*/
a{background-color: #0f0;
color:black;
/*
* 加none 就没有下划线了。
*/
text-decoration:none;
width:100px;
height:100px;
/*
* 对齐
*/
text-align:center;
/*inline-block是行内块，这里不换行。*/
display:inline-block;
}
/**
*继承性；
*没有给标签设相对应的属性，
*那么，它就会默认继承body的里面定义的属性。
*/
b{
color: red;
display: block;
}
/**
* 特殊性：
* 衡量css值优先级的标准
* /
/*import权重：无穷大*/
/*
* id选择器
*/
#abc{
background-color: blue;
}
/*
* 伪类选择器
*/
.ttt{
background-color: red;
}
/*块标签权重:一级权重（0001）*/
body{
color:#00FF00;
}
/*普通标签权重：一级权重（0001）*/
ul{
color: #000000;
}
/*
* 权重计算不进位，
* 即一级权重之间的加和，
* 怎么叠加也不会高于二级权重。
* 但是，不同等级权重之间可以相加，】
* 只是二级、三级对应的加和位置分别在十位和百位。
* 同等位权重叠加：0002
*/
ul li{
color: #BA2BE2;
}
</style>
</head>
<body>
<!--div块的权重：一级权重(0001)-->
<div>醒啦</div>
<div>醒啦</div>
<!--
id选择器优先器权重：三级权重（0100）
-->
<!--
这里要注意style为行内样式属性，
其权重为四级权重（1000）
-->
<div id="abc" style="background-color: #fff;">醒啦</div>
<!--
伪类选择器权重；二级权重（0010）
因为ttt伪类的级别比body高，
所以执行的结果与前三个不同,
即块的颜色为红色。
-->
<div class="ttt">醒啦</div>
<span>dkdfst</span><br/>
<span>dkdfst</span><br/>
<span>dkdfst</span><br/>
<span>dkdfst</span><br/>
<div>
<ul>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
</ul>
</div>
<a href="#">行内块</a>
<a href="#">行内块</a>
<a href="#">行内块</a>
<a href="#">行内块</a>
<!--
继承性；
尽管p块里没有写红颜色，
但是p里面的字体颜色继承了b块的字体颜色。。
-->
<b>asdfg<p>dkdfst</p></b>
<b>asdfg<p>dkdfst</p></b>
<b>asdfg<p>dkdfst</p></b>
<b>asdfg<p>dkdfst</p></b>
</body>
</html>
扫一扫
1643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
