为什么 div 元素的 css 属性没有应用到它的 child 锚标签？

Question

当我尝试将锚点放入 div 元素时，div 元素 css 未应用于锚点。下面是代码：

.nav-sub-menu-item {
  background-color: gainsboro;
  padding: 10px 25px;
  color: red;
  text-decoration: none;
}

<div class="nav-sub-menu-item">
  <a href="#">sub-menu-1</a>
</div>

虽然我已经设置了 text-decoration 和颜色属性，但锚点仍然使用带下划线的蓝色字体。 child 不应该继承 parent 的 css class 的属性吗？

Answer 1

是的，它不会继承给 <a />。

如果你想让<a />被继承，你应该声明它。

.nav-sub-menu-item {
    background-color: gainsboro;    
    padding: 10px 25px;
    color: red;
    text-decoration: none;
}

.nav-sub-menu-item > a {
  color: inherit;
  text-decoration: inherit;
}

<div class="nav-sub-menu-item">
     <a href="#">sub-menu-1</a>
</div>

Answer 2

试试这个：

.nav-sub-menu-item a {
    background-color: gainsboro;    
    padding: 10px 25px;
    color: red;
    text-decoration: none;
}

Answer 3

在CSS中，某些属性可以继承，而另一些则不能。这是在 documentation 中定义的。每个CSS属性都有inherited属性可以参考看是否支持默认继承

CSS properties can be categorized in two types:

inherited properties, which by default are set to the computed value of the parent element

non-inherited properties, which by default are set to initial value of the property

在您的情况下，text-decoration 属性不支持默认继承，请参阅 this 以了解更多信息。

在默认情况下，不支持继承的元素获取该元素的初始值属性。但是，您可以使用显式应用继承的 inherit 关键字强制继承。

When no value for a non-inherited property has been specified on an element, the element gets the initial value of that property (as specified in the property's summary).

此外，默认情况下，如果存在 href 属性，a（锚点）标签不会继承颜色等属性。这在 documentation

中有解释

通常情况下，当 A 仅定义锚点时，A 的内容不会以任何特殊方式呈现。

User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not.

.......

Usually, the contents of A are not rendered in any special way when A defines an anchor only.

可以通过将以下代码应用于您的 CSS 来实现此继承：

.nav-sub-menu-item > a {
  color: inherit;
  text-decoration: inherit;
}

为什么 div 元素的 css 属性没有应用到它的 child 锚标签？

Why is div element's css property not applied to its child anchor tag?

html

css

anchor

为什么 div 元素的 css 属性 没有应用到它的 child 锚标签？

Why is div element's css property not applied to its child anchor tag?

html

css

anchor

为什么 div 元素的 css 属性没有应用到它的 child 锚标签？