Question

我有以下标记：

<a><div class="action_button">Log In</div></a>

我在.action_button上设置样式以使其更大并具有背景等。

我还在.action_button:hover上设置样式，使其具有较浅的背景和用户在其上悬停时的插入阴影。

如何将样式应用于围绕它的锚标记，但仅限于它围绕.action_button div。

例如，这有效：

a:hover {
    text-decoration:none;
}

但它会影响所有链接，我只想影响围绕.action_button div的那些。

Answer 1

为什么不呢：

<a class="action_button"></a>

CSS：

.action_button {
    text-decoration: none;
    display: block; 
    /* other styles */
}

我没有看到在A中包含DIV的意义。如果您希望锚点是一个块，只需直接在该锚点上设置display: block。

Answer 2

a .action_button:hover{
    text-decoration:none;
}

Answer 3

我会略微更改代码 - <a>应嵌套在<div>内，因为div是一个块元素，而锚标记是内联的。

然后你可以简单地使用以下内容：

<style>
    .action_button a       {text-decoration:underline; }
    .action_button a:hover {text-decoration:none; }
</style>

Answer 4

我认为你需要在包含按钮的“a”元素中添加一个类。你不能建立一个在另一个方向工作的选择器。

Answer 5

你可以使用JQuery为每个带有类的div的“a”添加一个类.action_button

$("a").has("div.action_button").addClass("myclass");

然后，显然，使用该类选择“a”标签。