使用CSS

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

Answer 2

你可以这样做

＆＃13;

＆＃13;

.section-one .row .col {
  text-decoration: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助