css有哪些属性不继承父级的

1. 常见的不继承属性

在CSS中,有一些属性不会被子元素继承,包括以下几个方面:

1.1 文本和字体相关的属性

文本和字体相关的属性包括:

color

direction

font

font-family

font-size

font-style

font-variant

font-weight

letter-spacing

line-height

opacity

text-align

text-decoration

text-indent

text-shadow

text-transform

unicode-bidi

vertical-align

white-space

word-break

word-spacing

这些属性在父元素中设置后,不会被子元素继承。

1.2 边框、填充和背景相关的属性

边框、填充和背景相关的属性包括:

background

background-color

background-image

background-repeat

background-position

border

border-collapse

border-color

border-spacing

border-style

border-width

caption-side

empty-cells

padding

margin

这些属性对父元素的设置不会被子元素继承。

1.3 盒子模型相关的属性

盒子模型相关的属性包括:

display

float

clear

height

max-height

max-width

min-height

min-width

overflow

overflow-x

overflow-y

position

top

right

bottom

left

visibility

z-index

这些属性设置在父元素中时,也不会被子元素继承。

2. 一些例外情况

在上述不继承属性中,也存在一些例外情况。

2.1 继承部分属性值

有些属性或属性值是可以被子元素继承的。比如,

line-height: normal;

在这种情况下,子元素的行高将继承父元素的行高。

2.2 显示类型相关的属性

在某些情况下,显示类型相关的属性也会被子元素继承。比如:

display: flex;

flex-direction: column;

在这种情况下,子元素也会继承flex-direction属性

2.3 全局属性

CSS中还有一些全局属性,不会被父元素设置时以及其他元素使用时继承。比如:

all

@import

@charset

@namespace

这些属性在任何情况下都不会被继承。

3. 使用方法

在实际开发中,如果父元素的某些属性不想被子元素继承,我们可以使用以下方法:

3.1 使用特殊值(inherit、initial、unset)

可以使用特殊值inherit来指定个别子元素继承这些属性,或者使用initial和unset来重置或取消子元素的属性继承。

.parent {

font-size: 16px;

}

.child1 {

font-size: 24px; /*子元素不继承父元素的字体大小*/

}

.child2 {

font-size: inherit; /*子元素继承父元素的字体大小*/

}

.child3 {

font-size: unset; /*子元素的字体大小取消继承和重置,如果该元素没有定义字体大小,则继承父元素*/

}

.child4 {

font-size: initial; /*子元素的字体大小继承浏览器的默认值,而不是父元素的值*/

}

3.2 直接覆盖属性

在父元素中直接覆盖属性,使子元素不继承父元素的属性。比如:

.parent {

color: red;

}

.child {

color: black; /*子元素不继承父元素的颜色*/

}

3.3 使用多层嵌套

使用多层嵌套,使得不想继承属性的子元素不在想要继承属性的父元素之内。比如:

.parent1 {

color: red;

}

.parent2 {

color: green;

}

.child {

color: blue; /*子元素不继承父元素的颜色*/

}

在这种情况下,.child元素不会被.parent1和.parent2的颜色属性所影响。

4. 总结

在CSS中,有一些属性不会被子元素继承,包括文本和字体相关的属性、边框、填充和背景相关的属性、盒子模型相关的属性等。在实际开发中,可以使用继承部分属性值、显示类型相关的属性、全局属性、使用特殊值、直接覆盖属性、使用多层嵌套等方法来控制父元素和子元素之间的属性继承关系。