H3和锚点标签样式问题

Question

我有以下HTML片段，在我的页面上可以正常工作:

<a href="url goes here" onclick="return ! window.open(this.href);"><h3>title goes here</h3></a>

使用以下 CSS：

h3
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

然而，这不是有效的xhtml，因为<h3>标签不应该在<a>标签内。

当我将<h3>标签移动到<a>标签外时，CSS似乎无法工作，即它会因某种原因失去样式。

例如：

<h3><a href="url goes here" onclick="return ! window.open(this.href);">title goes here</a></h3>

使用：

h3
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

不再像在 <a> 标签内使用 <h3> 标签时那样工作。

如何进行更正？

- oshirowanen

---

更改 CSS 内容，写成 a>h3 并尝试。 - xkeshav

@diEcho - 看起来那并没有什么区别。 - oshirowanen

a+h3 可以工作...请尝试。 - xkeshav

@diEcho 这两个建议都是错误的。首先，你试图使用类似 <a><h3></h3></a> 的标记，第二个建议是针对 <a></a><h3></h3> 的。解决方案是根据你想要的具体程度使用 h3>a 或 h3 a。 - JohnP

Answer 1

你需要在 <a> 标签上应用样式。

尝试这个。

h3 a
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

- Shakti Singh

---

那似乎没有什么区别。 - oshirowanen

Answer 2

这是因为你的锚点样式具有优先权。你可以简单地更改样式表为：

h3, h3 a /** Applies to both H3 and LINK inside H3 **/
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

这应该解决问题。

- JohnP

---

那似乎没有什么影响。 - oshirowanen

@oshirowanen，你需要在fiddle上放置一些HTML代码，并展示出问题所在。 - JohnP

Answer 3

我知道这篇文章有点老了，但我也遇到了这个问题。你可能需要考虑任何可能覆盖你样式的伪类，例如a:visited等。因此，你还需要做的是：

h3 a, a:visited 
{
   font-family:verdana, arial, helvetica, sans-serif; 
   font-size:75%; 
   font-weight:bold; 
   font-style:normal; 
   text-decoration:none; 
   text-transform:none; 
   margin:0px; 
   padding:0px;
   color:#2C6598;
}

- assadf

Answer 4

我遇到了同样的问题，所以我只是简单地创建了一个新的类，包含我想要最终文本拥有的属性，就像这样：

CSS:（如果没有“！important”，它就不能正常工作）

.myclass, .myclass a {
display: block !important;
font-size: 14px !important; 
font-weight: bold !important;
height: 32px !important;}

HTML：

<a class="myclass" "url goes here">title goes here</a>

- chr