在链接内的div中将ah标签作为目标的css选择器

Question

我确定我之前已经做过，但现在无法为我工作。 我有一个像这样的“按钮”：

<a class="linkclass" href="#">
    <div class="divclass">
        <h3>TITLE</h3>
    </div>
</a>

我想使用a：link和a：visited来设置h3的样式，但似乎无法使CSS正确地专门针对它并覆盖影响它的其他CSS。

谢谢！

Answer 1

像这样选择：

a.linkclass > div.divclass > h3 { }
a.linkclass:hover > div.divclass > h3 { }
a.linkclass:visited > div.divclass > h3 { }

请记住， 级联在CSS中非常重要...因为在选择器中， :hover和:visited 特异性必须更高，以覆盖以前的所有选择器。

Answer 2

您可以使用例如

a:hover h3 {}

jsfiddle

Answer 3

链接应该在您的<h3>内部

然后，您想将CSS与最外层的包装器一起放在左侧，按这种方式进行。

 .divclass h3 a.linkclass { color: red; -webkit-transition:color 0.35s ease-in-out; transition:color 0.35s ease-in-out; } .divclass h3 a.linkclass:hover,.divclass h3 a.linkclass:visited { color: blue; } 

 <div class="divclass"> <h3><a class="linkclass" href="#">TITLE</a></h3> </div>