HTML怎么不继承父子样式,防止子元素继承父样式的CSS

最新推荐文章于 2022-06-02 11:38:25 发布

是辣翻天根根香啊

最新推荐文章于 2022-06-02 11:38:25 发布

阅读量5.6k

点赞数

文章标签： HTML怎么不继承父子样式

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:

How do I prevent CSS inheritance?

有没有办法声明元素的CSS属性，使其不会影响其任何子元素，或者有没有办法声明元素的CSS以仅实现指定的样式，而不继承为其父元素声明的任何样式？

一个简单的例子

HTML：

Content of the paragraph

Content of the span

CSS：

form div {

font-size: 12px;

font-weight: bold;

}

div.content {

/* Can anything go here? */

}

通常情况下，文本块"段落内容"和"跨度内容"都将为12px和粗体。

是否在上述CSS的" div.content"块中包含一个属性，以防止其继承" #container form div"块中的声明，从而将样式限制为仅"段落内容"和"范围的内容"，包括其他任何孩子div？

如果您想知道为什么，那么我创建了一个特定的CSS文件，该文件为项目中的所有表单赋予了特殊的感觉，而该表单下的div都继承了该感觉。没问题。但是在表单中，我想使用Flexigrid，但是flexigrid继承了样式，看起来毫无用处。如果我在表单之外使用flexigrid，并且这样它不会继承表单CSS，那么它看起来很棒。否则，它看起来太糟糕了。

不幸的是，不可能再回答了。但这将有助于解决您的问题：css-tricks.com/child-and-sibling-selectors

还查看初始值，许多情况将通过此方法解决，例如-display：initial;

不幸的是，您在这里不走运。

有inherit可以将某个值从父级复制到其子级，但是没有相反的属性(这将涉及另一个选择器来确定要还原的样式)。

您将必须手动还原样式更改：

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

如果可以访问标记，则可以添加几个类来精确设置所需样式：

form div.sub { color: red; }

form div div.content { /* remains green */ }

编辑：CSS工作组由以下方面决定：

div.content {

all: revert;

}

不知道，何时或是否将由浏览器实现。

编辑2：截至2015年3月，除Safari和IE / Edge之外，所有现代浏览器均已实现：https://twitter.com/LeaVerou/status/577390241763467264(感谢@Lea Verou！)

编辑3：default重命名为revert。

+1在我看来是修复它的唯一方法。

font-size: default尚未在Chrome中运行(2年后)

事实上，现在仅6个月后。我在三月份编辑了答案。 ;-)

关于css all属性；根据caniuse.com，Safari和IE均不支持它； caniuse.com/#feat=css-all

确实。我更新了答案。谢谢！

default不是all属性的有效值。我相信您想要的值是initial：w3schools.com/cssref/css3_pr_all.asp

不，default是我编写此答案时在工作草案中的一个值。 initial做的事情很不直观(例如为所有内容设置display:inline)。 CSS 4现在添加了revert，看起来就像过去的default。 (顺便感谢您指出！)

@boldewyn initial不会将所有内容都设置为display:inline。就像听起来一样，它将其设置为初始值或默认浏览器样式。请参阅：developer.mozilla.org/zh-CN/docs/Web/CSS/initial-"初始CSS关键字将属性的初始值应用于元素。在每个CSS属性上均允许使用该属性，并为其创建元素指定为使用属性的初始值。"

@TetraDev的问题是，什么是初始值，这里的规范是明确的：每个属性都有一个初始值，定义在属性的定义表中。而且，display的初始值是inline 。如果选择器指向div或table或span，则完全不重要。就像我在上面说的那样：它相当不直观。

证明：看，该规范在Initial:下的含义是：drafts.c??sswg.org/css-display/#the-display-properties

现在就全部了：未设置

哎呀！香港专业教育学院有一个跨度不正确地垂直居中其父div。如果在chrome检查器中，我取消选中它从其父类继承的"高度"属性，则该属性正确居中。但是如果我手动将高度设置为任何值，由于某种原因，它将被完全忽略！！！

您是否尝试过height:auto？那就是height的官方默认值。

您不能自己设置样式的样式吗？然后，相应地设置div的样式。

form

{

/* styles */

}

您始终可以通过使继承样式变得重要来废除继承的样式：

form