使用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文本的下划线

回答

相关问题