text-decoration：none 和 chrome 检查器显示

Question

我无法删除 text-decoration: underline 属性。

我的样式表显示为：

a {
    text-decoration: underline;
    }

a:link .product-price {
    text-decoration: none !important;
    }

我的 HTML 读取：

<div class="product">
 <a>
  <img />
  <div class="product-info">
    <div class="product-title"></div>
    <div class="product-price"></div>
    <div class="product-reviews"></div>
  </div>
  </a>
</div>

Chrome 的检查员显示：

a:link .product-price {
    text-decoration: none !important;
    }

然后再往下，变灰（在标题 "Inherited from a" 下）：

a {
    text-decoration: underline;
    }

为什么继承的样式会覆盖我应用的样式，它具有更多的特异性，一个 !important 标记，并且在调用顺序中出现在较低的位置？如果被覆盖，我应用的样式会不会像这样：

text-decoration: none !important;

我很困惑。

Answer 1

您可以将 display:inline-block 添加到 product-price 元素。这是关于从 parent 到 child 的 text-decoration 传播。

Text-decorations 不会传播到 inline-block 元素。所以你甚至不必添加 text-decoration: none

.product-price {
  display:inline-block;
}

<a href="#">
<span class='product-price'>no underline</span>
Link Text
</a>

text-decoration：none 和 chrome 检查器显示

text-decoration: none and the chrome inspector display

css

text-decorations