使用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選擇器參考

Answer 2

你可以做

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

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

希望能幫助到你