1

我想让一个包含文本的整个框（由 < div > 分隔）充当链接，但我也希望该链接中的文本具有样式。我似乎无法同时获得：

(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;
}

在这种情况下，我的整个框（带边框的 < div >）充当链接，但文本“Test”没有样式（显示为标准 Web 链接）。

(2)

HTML

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

CSS是一样的

在这种情况下，文本已设置样式，但我的框不再充当链接，而只是文本。

我怎样才能让我的盒子作为链接和文本样式？

4

3 回答 3

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. 我将课程从 thea移到 thediv并更改了 css。

于 2013-08-15T21:49:01.887 回答
0

你的 CSS 是倒退的

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

应该是这样的：

 a .categoryName
{
    color: black;
    text-decoration: none;
    font-weight: bold;
}
于 2013-08-15T21:51:59.290 回答
0

我认为您可以通过简单地执行以下操作来实现相同的目标：

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。

于 2013-08-15T22:13:05.467 回答