为什么div元素的css属性不应用于其子锚标签？

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 &color属性，但锚还是保持蓝色字体和下划线。子元素是不是应该继承父元素的css类属性？

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中，某些属性是可以继承的，而另一些属性则不能。这在 文件. 每个CSS属性都有 遗传性 属性，可以参考该属性来查看其是否支持默认继承。

CSS属性可以分为两种类型。

• 继承属性，默认情况下，它被设置为父元素的计算值。

• 非继承属性，默认设置为属性的初始值。

在你的情况下， text-decoration 属性不支持默认继承，请参考 这个 来了解更多。

在默认情况下，不支持继承的情况下，元素获得该属性的初始值。但是，你可以通过使用 inherit 关键字，它明确地应用了继承。

当元素上没有指定非继承属性的值时，元素将获得该属性的初始值（如属性摘要中指定的）。

另外，默认情况下。a (anchor)标签在存在href属性的情况下不会继承颜色等属性。这一点在这里有解释 文件

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

用户代理一般会以这样的方式来渲染链接，使其对用户来说很明显（下划线、反转视频等）。具体的渲染方式取决于用户代理。根据用户是否已经访问过该链接，渲染方式可能会有所不同。

.....

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

这种继承可以通过在你的CSS中应用以下代码来实现。

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