从正文(父)继承CSS值不起作用

从正文(父)继承CSS值不起作用是指在CSS中使用inherit关键字时，子元素无法继承父元素的某些CSS属性值的情况。

CSS中的inherit关键字用于将父元素的某个属性值应用到子元素上。通常情况下，大多数CSS属性都可以继承给子元素，例如color、font-size、text-align等。但是，并非所有的CSS属性都可以被继承，一些常见的不可继承属性包括背景图片、边框样式、宽度、高度等。

当在子元素中使用inherit关键字时，如果父元素的该属性值是可继承的，那么子元素将会继承父元素的该属性值。但如果父元素的该属性值是不可继承的，或者父元素本身没有设置该属性值，那么子元素将无法继承该属性值，即使使用了inherit关键字也不起作用。

这种情况下，可以考虑使用其他方法来实现类似的效果。例如，可以通过给子元素添加自定义的CSS类，并在该类中设置需要的属性值，或者使用JavaScript来动态地将父元素的属性值应用到子元素上。

需要注意的是，不同的CSS属性在不同的浏览器中可能存在差异，某些属性在某些浏览器中可能无法继承，因此在编写CSS时需要仔细考虑属性的继承性。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器 CVM：https://cloud.tencent.com/product/cvm
云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
云数据库 MySQL：https://cloud.tencent.com/product/cdb_mysql
云存储 COS：https://cloud.tencent.com/product/cos
人工智能 AI：https://cloud.tencent.com/product/ai

相关·内容

CSS中如何解决子元素继承父元素的opacity属性？

解决方案这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式...background: red; color: black; } 子元素会继承父级元素的...opacity属性子元素会继承父级元素的opacity属性 2.把opacity属性放到同级元素实现...background: red; color: black; } 子元素会继承父级元素的...opacity属性子元素会继承父级元素的

4.4K3 0

css移除父元素继承的属性，initial、unset、revert和inherit属性介绍

2. unset 作用：重置 CSS 属性为其继承值（如果有）或其初始值（如果没有继承值）。继承：如果属性有继承性质，则会应用继承值；如果没有继承性质，则应用初始值。...如果属性有继承性质，则会应用父元素的值，否则会应用初始值。 3. revert 作用：将 CSS 属性重置为其父元素的值，如果没有父元素，则行为类似于 initial 。...示例： .child { font-size: revert; /* 将 font-size 重置为父元素的值 */ } 使用 revert 关键字将 CSS 属性重置为其父元素的值，如果没有父元素...如果属性有继承性质，则会应用父元素的值，否则会应用初始值。 4. inherit 作用：将 CSS 属性设置为其父元素的值，即强制继承父元素的该属性值。继承：总是应用父元素的值。...示例： .child { color: inherit; /* 将 color 设置为父元素的值 */ } 使用 inherit 关键字将 CSS 属性设置为其父元素的值，即强制继承父元素的该属性值

930 0

CSS3中如何解决子元素继承父元素的opacity属性

问题 css3中的opacity属性是用来设置 div 元素的不透明级别的，但是我们往往会遇到因为父级元素设定opacity后，子元素也跟着透明了，但是有时候我们只是想让背景是透明的，这该如何解决呢？...background: red; color: black; } 子元素会继承父级元素的...opacity属性子元素会继承父级元素的opacity属性这样我们得到的是无效的：...解决方案这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式...opacity属性子元素会继承父级元素的opacity属性效果如下：发布者：全栈程序员栈长

3.9K2 0

父组件从vuex获取数据给子组件传值延迟问题

做项目的时候发现如果子组件在页面比较靠上，子组件渲染的时候父组件还未取到值，导致子组件取不到数据原因：子组件created和mounted 只执行一次，在父组件初始化时，已经给子组件传了一个空值，导致异步请求数据发生变化时...，子组件的值不再变化。...let tepArr = []; this.sortData(this.navMenus, tepArr); this.headMenus = tepArr }, 解决方法：在父组件上增加一个

2.8K1 0

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少所有题目汇总在我的...4、从倒影说起，谈谈 CSS 继承 inherit 给定一张有如下背景图的 div： ? 制作如下的倒影效果： ?...这决定了当你没有为元素的属性指定值时该如何计算值。灵活使用 inherit 继承父值，可以解决许多看似复杂的问题。...对于本题，我们对图片容器添加一个伪元素，使用 background-image:inherit 继承父值的背景图值，就可以做到无论图片如何变，我们的 CSS 代码都无需改动： div:before {...说到底，CSS 属性的取值就是由默认值（initial），继承（inherit）与加权系统构成的（其实还有 unset(未设置)、revert(还原)），厘清它们的关系及使用方法对熟练使用 CSS 大有裨益

3842 0

谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset

题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题谈谈一些有趣的...谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！所有题目汇总在我的 Github 。正文从这里开始。...譬如，以 background-color 为例，由下图所示，表明它并不会继承父元素的 background-color: ?...：border-collapse 还有一些 inherit 的妙用可以看看这里：谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit，合理的运用 inherit 可以让我们的...也就是当我们给一个 CSS 属性设置了 unset 的话：如果该属性是默认继承属性，该值等同于 inherit 如果该属性是非继承属性，该值等同于 initial 举个例子，根据上面列举的 CSS 中默认继承父级样式的属性

9005 0

CSS总结

一、CSS特性　　1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。　　　...（注：button、input、select、textarea在IE下是不继承body属性的，需要单独写）。　　2.层叠：子元素如果定义了与父元素一样的样式，就会覆盖父元素的样式。...优点是不再单独为父元素包含的子元素进行设置id使得css代码更加简化，优化了css代码！...而且还不同，所以我们需要首先将所有的浏览器的内外边距的默认值都设置为零，css属性虽然有继承的特点，但是并不是所有的属性都能继承。　　...[5]:CSS常见布局方式：一行一列居中、一行两列居中、两行两列、三行两列、三行三列. 　　[6]:当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加.

2.1K1 0

148道 CSS 与 JavaScript 基础面试题

CSS 中哪些属性可以继承？...，可以使用 inherit 关键字指定一个属性应从父元素继承它的值，inherit 关键字用于显式地指定继承性，可用于任何继承性 / 非继承性属性。...CSS 优先级算法如何计算？相关知识点： CSS的优先级是根据样式声明的特殊性值来判断的。...important也适用通配符选择器的特殊性值为：0,0,0,0 继承样式优先级最低，通配符样式优先级高于继承样式 !...默认值为auto，表示继承父元素的align-items 属性，如果没有父元素，则等同于stretch。 14. 用纯 CSS 创建一个三角形的原理是什么？采用的是相邻边框连接处的均分原理。

1.1K2 0

Flex布局入门

响应式布局解决方法，设置flex布局后元素的 float、clear、vertical-align属性将失效主要参数： flex-direaction 决定主轴的方向 - 参数： - row(默认值)...第一行在下方 flex-flow 是flex-direaction 和 flex-wrap的简写 justify-content 在主轴（水平）上的对齐方式 - 参数： - flex-start(默认值)...baseline: 第一行文字的基线对齐 - stretch: 如果项目未设置高度或者auto，将占满整个容器 align-content 多根轴线的对齐方式，单一不起作用...flex-basis 在分配多余空间之前，先计算是否有多余空间 flex 上面三个的简写 align-self 允许单个项目和其他项目有不一样的对齐方式，可覆盖align-items属性，默认auto，表示继承父元素的...align-items属性，如果没有父元素则等同于stretch Css三栏布局让你一看就会 Css常用函数

4991 0

寒假提升｜ Day6 CSS 第四部分

写出案例，证明CSS属性的继承性当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div...)都会默认继承这些属性二...., 沿着顺时针转动的, 也就是上右下左; margin也并非必须是四个值, 也可以有其他值; margin 的其他值上下 margin 的传递 margin-top传递如果块级元素的顶部线和父元素的顶部线重叠...，那么这个块级元素的 margin-top 值会传递给父元素 margin-bottom传递如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是 auto ，那么这个块级元素的 margin-bottom...值会传递给父元素如何防止出现传递问题?

1.3K2 0

HTMLCSS 常见面试题汇总

样式表的继承 CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。...px是相对长度单位，相对于显示器屏幕分辨率而言的； em是相对长度单位，相对于当前对象内文本的字体尺寸； px定义的字体，无法用浏览器字体放大功能；em的值并不是固定，会继承父级元素的字体大小， 1 ÷...父元素的font-size × 需要转换的像素值 = em值 11、CSS中link和@import 的区别是什么？...15、为什么要初始化CSS样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会出现浏览器之间的页面显示差异； CSS样式初始化之后会对SEO有一定的影响。...（带单位、纯数字、百分比） **带单位：**px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高； **纯数字：**把比例传递给后代，例如父级行高为1.5，子元素字体为18px

1.6K2 0

前端基础-CSS定位

总结： 1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html 2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容...），可以定义宽高，不占据标准流的空间 3.margin:auto对于设置过绝对定位的元素不起作用 4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义使用场景：配合相对定位使用...总结： 1.会脱离文档流，不占据标准流的空间 2.不继承父元素的宽高，需要给自身定义宽高 3.margin:auto对固定定位的元素不起作用 4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置...，离用户越近负数，数字越小，层级越低，离用户越远 2.auto：（默认值）和父元素层级相同 3.正数比auto大，负数比auto小 <meta charset="utf-...总结： 1.z-index只针对定位元素有效果（但不包括静态定位） 2.z-index值越大，层级越高 3.如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto

6232 0

那些不常见，但却非常实用的css属性(整理不易)

之外的所有属性重设至其初始值，或继承值。...inherit 改变该元素的值至从父元素继承的值 unset 如果该元素的属性的值是可继承的，重置为父元素的继承的值，反之则改变为初始值。...object-position: 10px 10px; 可以设置 px，第一个值代表距离父容器左边的距离，第二个值代表距离父容器顶部的距离。只有一个数值则只代表距离父容器左侧的距离。...也可以设置%数值，但此时只有某一边有空白才会起作用，如果没有空白，刚好铺满父元素，则不起作用。设置 px 就没有这样的问题，任何之后都会起作用。...display 必须为 inline-block 或者 block，否则上面的值不起作用。 fill-available 元素撑满可用空间。参考的基准为父元素有多宽多高。

1.9K1 0

【CSS 学习笔记】CSS元素和布局

Width = width Height = height inherit: 继承父类的属性块级元素 auto 在上面提到的几个属性中，只有margin, width, height 可以设为 auto...如果一个正外边距和一个负外边距，会从正外边距减去负外边距的绝对值。...- 从父类中继承注意点内联非替换元素的 width 和 height 是不起作用的 padding 和 border 不改变 line-height margin-top 和 margin-bottom...compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。...所有数都可以作为 z-index 的值，包括负数。需要注意的是 z-indexstatic 子元素会继承父元素的，子元素设置的是相对于父元素的局部。比如下面的代码：.p2 .c.p1 .c

1.1K2 0

CSS flex笔记

/* flex-direction 排列方向从左往右 - row 从右往左 - row-reverse 从上往下 - column 从下往上 - column-reverse...stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。...如果项目只有一根轴线，该属性不起作用。 /* align-content 多轴对齐方式 flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。...stretch（默认值）：轴线占满整个交叉轴。...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

7952 0

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

应该从父元素继承 2、引入css的方式有几种，分别是什么？...它会继承父级元素的字体大小，因此并不是一个固定的值。 rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。...（设置 rgba 透明的元素的子元素不会继承透明效果！） 24、css sprite是什么,有什么优缺点？概念：将多个小图片拼接到一个图片中。...如果display为none，那么position和float都不起作用，这种情况下元素不产生框否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3.1K2 0

CSS定位

静态定位所有的标准流都是静态定位 position:static; 一般用于将某些已经定位的元素还原成标准流，用的很少偏移值对于静态定位来说不起作用，我们以后说的元素定位不包括静态定位 <!...不会继承父级的的宽度，内容有多个就撑多大（不论块级还是行内） 1.3....固定定位 position: fixed; 特性： 1.脱标 1.1.脱标的元素不占标准流的位置 1.2.不会继承父级的的宽度，内容有多个就撑多大（不论块级还是行内） 1.3.可以直接写宽高...固定定位fixed 完全脱标，不占有位置可以相对于浏览器移动位置 z-index 控制“定位”元素的叠放层级 z-index只针对定位元素有效果 z-index值越大，层级越高如果父元素已经比较过层级了...（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的

1K4 0

前端之CSS内容

7、选择器的优先级 7.1 CSS继承继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。...p { color: green; } 　　此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。...: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 1.2 字体大小 p { font-size: 14px; } 如果设置成 nherit 表示继承父元素的字体大小值...值描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100-900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值...默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。

5.2K10 0

CSS小技能:常用样式属性、选择器分类、盒子模型

border: 1px solid black; } 在 CSS 中，属性和值都是区分大小写的,每对中的属性和值由冒号 (:) 分隔。...选择器的优先级排序:important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承 II CSS选择器分类 2.1 基础选择器选择器别名说明...样式的继承:子标签会继承父标签的样式例子：+～结合filter实现暗黑模式 2.3 集合选择器选择器别名说明版本 elem1,elem2 并集选择器多个指定的元素 1 elem.class...，在绝大数情况下意味着盒子会和父容器一样宽每个盒子都会换行 width 和 height 属性可以发挥作用内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围...width 和 height 属性将不起作用 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

1.8K1 0

浏览器兼容性问题

2.浏览器兼容问题五：图片默认有间距问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。...解决方法：display：inline； 4 一个父标签与几个子标签嵌套，父标签不浮动，子标签float，子标签不撑开父的高度。...；} c 给父标签设置高度 5.两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值。...important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!...important不起作用。 7.火狐不识别background-position-y 或background-position-x;

1.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云