折叠性是指当多个CSS属性应用到同一个元素上时,它们如何相互作用以确定最终的样式。当不同的规则决定同一个属性的值时,折叠性规定了哪个规则的值会被应用。
折叠性的规则如下:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
在这个示例中,两个p选择器都定义了不同的颜色属性,一个是红色,一个是蓝色。根据折叠性规则,后面的规则会覆盖前面的规则。因此,最终应用到段落的颜色将是蓝色。
继承性是指某些CSS属性的值能够被其子元素继承。当一个元素的某个属性没有显式地定义时,它将从父元素继承该属性的值。
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-size: 20px;
}
</style>
</head>
<body>
<div class="parent">
<p>This is a paragraph with inherited font size.</p>
</div>
</body>
</html>
在上面的示例中,父元素的字体大小设置为20像素,子元素的字体大小将继承为20像素。
CSS中的优先级是用于确定哪个规则将应用到特定元素的机制。它基于不同选择器和声明之间的特定性和重要性。
选择器 | 选择器权重 |
---|---|
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | 无穷大 |
下面是CSS中优先级的一般规则:
<p style="color: blue;">This is a paragraph with inline style.</p>
<style>
#myElement {
color: red;
}
</style>
<p id="myElement">This is a paragraph with ID selector.</p>
<style>
.myClass {
color: green;
}
[type="text"] {
font-weight: bold;
}
</style>
<p class="myClass">This is a paragraph with class selector.</p>
<input type="text" value="Example" />
<style>
p {
font-size: 18px;
}
a:hover {
color: orange;
}
</style>
<p>This is a paragraph with element selector.</p>
<a href="#" class="myLink">Link</a>
<style>
* {
margin: 0;
padding: 0;
}
p::first-line {
text-transform: uppercase;
}
</style>
<p>This is a paragraph with universal selector.</p>
注意: