XZ_CSS之CSS属性-继承和不可继承

最新推荐文章于 2025-05-25 15:39:39 发布

原创最新推荐文章于 2025-05-25 15:39:39 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS属性-继承 #CSS属性-不可继承 #块级标签可继承 #列表标签可继承

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS中的可继承和不可继承属性的区别，并列举了不同类型的标签可以继承的CSS属性及不可继承的CSS属性，帮助读者更好地理解并运用这些属性。

CSS属性-继承和不可继承

CSS有N多属性，根据继承性，主要分为2大类：

可继承属性

父标签的属性值会传递给子标签
一般是文字控制属性

不可继承属性

父标签的属性值不能传递给子标签
一般是区块控制属性

<style>

/** 可继承性 */

body{

color: brown;

font-size: 18px;

}

</style>

<body>

<div>我是块级标签</div>

<span>我是行内标签</span>

</body>

<style>

/** 不可继承性 */

#main {

background-color: gold;

width: 300px;

height: 100px;

}

.test1 {

background-color: green;

width: 150px;

}

</style>

<body>

我是里面的div

</div>

</body>

CSS属性-可继承属性（红色表示常用）

所有标签可继承

visibility、cursor

内联标签可继承

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration（属性规定添加到文本的修饰,这个属性允许对文本设置某种效果，如加下划线,穿过文本下的一条线）、text-transform、direction

/** 属性规定元素是否可见:这个属性指定是否显示一个元素生成的元素框，这意味着元素仍占据其本来的空间，不过可以完全不可见；

hidden隐藏，但是，保留占位；

默认值：visible；

可继承；

collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用，如果此值使用在其他元素上，会呈现为"hidden" */

visibility: hidden;

/** none隐藏且没有占位； */

display: none;

cursor 属性规定要显示的光标的类型（形状）:该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

默认值：auto；可继承；

可能的值：crosshair（光标呈现为十字线。）；pointer（光标呈现为指示链接的指针（一只手））；move（此光标指示某对象可被移动。）；help（此光标指示可用的帮助（通常是一个问号或一个气球））。

text-decoration