为什么 div 元素的 css 属性未应用于其子锚标记？答案

【问题标题】：Why is div element's css property not applied to its child anchor tag?为什么 div 元素的 css 属性未应用于其子锚标记？
【发布时间】：2020-09-30 14:19:45
【问题描述】：

当我尝试在 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>

虽然我已经设置了文本装饰和颜色属性，但锚点仍然是带有下划线的蓝色字体。孩子不应该继承父母的css类的属性吗？

【问题讨论】：

标签： html css anchor

【解决方案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>

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

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

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

继承属性，默认设置为父元素的计算值

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

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

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

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

此外，默认情况下，如果存在 href 属性，a（锚）标签不会继承颜色等属性。这在documentation中进行了解释@

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

用户代理通常以使用户明显的方式呈现链接（下划线、反向视频等）。确切的渲染取决于用户代理。渲染可能会根据用户是否已经访问过链接而有所不同。

.....

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

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

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

【讨论】：