使用CSS刪除元素中h文本的下劃線

我在下面的代碼中刪除自動瀏覽器下劃線的文本時遇到問題。使用CSS刪除元素中h文本的下劃線

<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元素爲紐帶。

任何建議非常感謝！

來源

2016-11-22 basil3

作爲.product-dress-image-main的小孩，您的CSS針對的是<a/>。這應該工作：

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

欲瞭解更多信息： CSS Selector Reference

來源

2016-11-22 22:52:56 Daerik

我在[jsfiddle]（https://jsfiddle.net/vv9gz02e/）中運行了你的例子，它看起來不錯;有一個upvote。 –

砸死它！感謝兄弟......你有沒有任何機會有任何好的學習鏈接或材料，我可以閱讀在CSS中選擇兒童/父母關係？......不太確定我完全理解答案！基本上你是說，通過使用「a.class-name」，我現在選擇一個元素作爲父元素，並將樣式應用於其中的所有元素（例如元素）？ – basil3

@ basil3我已經添加了對答案的參考。 – Daerik

你可以做

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

希望它可以幫助

來源

2016-11-22 22:54:31 Geeky

使用CSS刪除元素中h文本的下劃線

回答

相關問題