CSS 注释
虽然HTML与CSS会混合使用,但是CSS的注释为
/* */
与HTMl的注释相同,CSS的注释同样可以跨行。
/*
*/
CSS 级联
网页的最终外观是不同的样式结合的结果。
通过样式的三个主要来源形成一个级联,其优先顺序如下:
1.由页面的作者创建的样式表
2.用户自定义样式
3.浏览器的默认样式
然后是基于选择符和特殊性的规则排序:
1.内联样式表的优先级最高。
2.id选择符,当有多个id选择符时,具有id选择符多的规则胜出。
3.如果没有id选择符,或者数量相同,那么规则中有最多类或伪类的规则有较高优先级。
4.如果类(或是没有类),那么规则中有最多元素数量的,优先级较高。
5.如果id,class,和元素数量都相同,则最近声明的原则有最高优先级。
下面为大家演示一下
<html>
<head>
<title>层叠特性</title>
<style>
p {
color: green;
}
.red {
color: red;
}
.purple {
color: purple;
}
#line {
color: blue;
}
</style>
</head>
<body>
<p>这是第1行文本</p>
<p class="red">这是第2行文本</p>
<!--适用规则 3 -->
<p id="line" class="red">这是第3行文本</p>
<!--适用规则 2 -->
<p style="color:orange;" id="line">这是第4行文本</p>
<!--适用规则 1 -->
<p class="purple red">这是第5行文本</p>
<!--适用规则 5 purple 的声明距离此行代码更近-->
</body>
</html>
效果如下
可以简单的理解为,优先级(特殊性) sytle > id > class,并采取就近原则。
CSS 继承
除非另有定义,子元素通常会采用父元素的特征。
<html>
<head>
<style>
body {
color: green;
/* body 为父元素 */
}
</style>
</head>
<body>
<p>
路人甲
<!-- p 为子元素 -->
</p>
</body>
</html>
效果如下