1. 什么是CSS继承样式
CSS继承样式指的是，一些CSS样式可以同时应用于父元素和子元素，使子元素能够继承父元素的样式规则，从而简化CSS编码。换句话说，这些样式可以在不修改子元素样式的情况下，改变子元素的表现形式。
那么CSS继承样式有哪些呢？
2. CSS继承样式分类
2.1 文本样式
文本样式是CSS中被大量使用的一类样式，它们可以被应用于父元素，同时也会被子元素所继承。以下是一些常见的继承文本样式：
/* 父元素 */
p {
font-family: Arial;
font-size: 16px;
color: #333;
line-height: 1.5;
}
/* 子元素 */
a {
/* 继承了font-family和font-size样式 */
color: blue;
text-decoration: none;
}
在上面的例子中，a元素继承了父元素的font-family和font-size属性并改变了它自己的颜色和下划线。
同时，其他的文本样式也可以被继承，如text-align，text-indent以及word-spacing等，需要注意的是，不是所有的文本样式都能被继承。
2.2 Box模型样式
Box模型是指每个元素都是由一个矩形盒子组成，这些盒子有着自己的位置、尺寸、边框大小、内边距和背景颜色等属性。Box模型样式包括：
/* 父元素 */
div {
width: 300px;
height: 200px;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
}
/* 子元素 */
p {
/* 继承了margin和padding样式 */
font-size: 16px;
color: #333;
}
在上面的例子中，p元素继承了父元素的margin和padding属性，但它没有继承父元素的尺寸大小和颜色属性。这是因为Box模型样式只有间距属性能被继承。
2.3 列表样式
列表样式一般被使用在ul和ol元素上，但由于它们被视为文本样式，所以它们也可以被继承。
/* 父元素 */
ul {
list-style: none;
}
/* 子元素 */
li {
/* 继承了list-style样式 */
font-size: 16px;
color: #333;
}
在上面的例子中，li元素继承了父元素的list-style属性。
2.4 表格样式
与列表样式类似，表格样式也可以被继承。但需要注意的是，表格样式不仅包括table元素的样式，还包括thead、tbody、tfoot和tr等子元素的样式。
/* 父元素 */
table {
border-collapse: collapse;
}
/* 子元素 */
th, td {
/* 继承了border-collapse样式 */
padding: 10px;
}
在上面的例子中，th和td元素继承了table元素的border-collapse属性。
3. 总结
CSS继承样式能够为前端工程师提供更方便的编码方式。可以简化CSS代码，提高代码的可读性。
本文主要介绍了CSS中常见的继承样式，包括文本样式、Box模型样式、列表样式和表格样式等。需要注意的是，不是所有的样式都能被继承。