[分享]CSS具有继承性和优先级

CSS（层叠样式表）是一种用于定义网页外观的语言，它为网页提供了各种各样的样式和布局选项，让网页设计更加丰富多彩。CSS具有两个重要的特性：继承性和优先级。/ 继承性示例 / body { fontf...

CSS（层叠样式表）是一种用于定义网页外观的语言，它为网页提供了各种各样的样式和布局选项，让网页设计更加丰富多彩。CSS具有两个重要的特性：继承性和优先级。

/* 继承性示例 */
body {
   font-family: Arial, sans-serif;
   font-size: 16px;
}

h1 {
   color: #3d3d3d;
   font-size: 36px;
}

/* 子元素继承父元素样式 */
p {
   color: red;
   font-weight: bold;
   font-style: italic;
} 

继承性是指子元素可以继承其父元素的样式。在上面的示例中，p元素继承了body元素的字体和字号，因此所有p元素的字体和字号都为Arial和16px。而h1元素没有声明字体和字号，因此它继承了body元素的样式。

/* 优先级示例 */
/* 每个类的优先级相同 */
.class1 {
   font-size: 14px;
}
.class2 {
   font-size: 16px;
}
.class3 {
   font-size: 18px;
}

/* ID具有更高的优先级 */
#id1 {
   color: red;
}

/* 内联样式优先级最高 */
<p style="color: blue;">Hello World!</p> 

优先级是指当多个样式规则同时应用于同一元素时，浏览器如何选择使用哪一个规则。如上面的示例，元素可以有多个类和一个唯一的ID，类和ID都可以为元素设置样式。同时，元素可以使用内联样式定义样式。在冲突情况下，ID的优先级最高，其次是内联样式，最后是类。因此，在上面的示例中，p元素使用内联样式定义了蓝色字体，因此它将覆盖所有其他样式，并使文本呈现为蓝色。