html - 使用 CSS 从元素内的 h 文本中删除下划线

Question

我在删除以下代码中文本的自动浏览器下划线时遇到问题。

<div class="section-one">

        <div class="row products-top-row">
         <a href="product_main.php?cat=Dress" class="col span-1-of-2 product-dress-image-main">
          <div>
           <h2>Dresses</h2>
          </div>   
         </a>
        </div>
</div>

在我的 CSS 文件中，我尝试了以下我认为可行的方法:

.product-dress-image-main a {

text-decoration: none;    

}

我也尝试过:

.product-dress-image-main a:active,
.product-dress-image-main a:hover,
.product-dress-image-main a:visited,
.product-dress-image-main a:link {

text-decoration: none;    

}

我什至尝试做一个全局的:

a {
text-decoration: none;
}

这些都不起作用，但是当我直接添加样式时(如下例所示)，它会删除下划线吗？为什么它不在 CSS 文档中这样做？我想我可能搞砸了我的层次结构。

<div class="section-one">

    <div class="row products-top-row">
     <a href="product_main.php?cat=Dress" class="col span-1-of-2 product-dress-image-main" style="text-decoration:none">
      <div>
       <h2>Dresses</h2>
      </div>   
     </a>
    </div>
</div>

仅供引用 - 我在元素中包含 div 的原因是我将整个 div 元素用作链接(主页上的可点击图片将客户带到产品页面)。

非常感谢任何建议!!!

Answer 1

您的 CSS 以 <a/> 为目标作为 .product-dress-image-main 的子项。这应该有效:

a.product-dress-image-main {
    text-decoration: none;    
}

更多信息: CSS Selector Reference