Question

我希望有一个整个框（由＆lt; div＆gt;分隔），其中包含一个文本作为链接，但我也想要对该链接中的文本进行样式设置。我似乎无法兼得：

（1）

HTML

<a href="#" onclick="toggle('category')"><div class="categoryName">Test</div></a>

CSS

.categoryName {
    border: 1px solid black;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 5px;
}
.categoryName a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

在这种情况下，我的整个框（带边框的＆lt; div＆gt;）充当链接，但文本“Test”未设置样式（显示为标准Web链接）。

（2）

HTML

<div class="categoryName"><a href="#" onclick="toggle('category')">Test</a></div>

CSS是相同的

在这种情况下，文本的样式，但我的框不再作为链接，只是文本。

如何让我的框作为链接和文本样式？

Answer 1

.categoryName a

在a元素

中包含样式.categoryName元素

这应该有效：

HTML

<a class="categoryName" href="#" onclick="toggle('category')"><div>Test</div></a>

CSS

.categoryName
{
    color: black;
    text-decoration: none;
    font-weight: bold;
}
.categoryName div
{
    border: 1px solid black;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 5px;
}

http://jsfiddle.net/S9A7L/

所以这就是说使用类div来设置元素内部的categoryName元素。我将课程从a移到div并更改了CSS。

Answer 2

你的CSS是向后的

<a href="#" onclick="toggle('category')"><div class="categoryName">Test</div></a>

这是应该如何：

 a .categoryName
{
    color: black;
    text-decoration: none;
    font-weight: bold;
}

Answer 3

我认为你可以通过简单地做到这一点来实现同样的目标：

HTML

<a class="blocklink" href="#" onclick="toggle('category')">Test</a>

CSS

.blocklink {
    display:block; /* ! */
    border: 1px solid black;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 5px;
    color: black;
    text-decoration: none;
    font-weight: bold;
}

......根本不需要div。

HTML，CSS：设置链接的样式并创建整个div链接

3 个答案: