2

我有一个页面列出了指向其他网站的链接。每个链接后面都附有对所链接站点的简要说明。我希望链接文本比描述略大，所以我添加了一个 CSS 类定义 a.link，在其中我将 font-size 定义为 16px。完整列表位于标准标签内，每个列表项之间<p>都有标签。<hr>问题是只有列表中的第一个链接获得新的字体大小。第一个链接之后的每个链接都丢失了不仅在链接类定义中定义的所有样式，而且在<p>标签中也定义了所有样式。如果我删除<hr>标签，列表中的每个项目的样式都是正确的。如果我将列表中的每个链接包装在一个<p>标签内，它们的样式也会正确，但如果可能的话，我宁愿不要用额外的标签把列表弄乱

这是我的样式表代码：

#pane {
    float: right;
    width: 800px;
}

#pane p {
    margin-left: 15px;
    font-family: verdana;
    font-size: 12px;
}

#pane p a.link { font-size: 16px; }

以下是生成的 HTML 示例：

<div id="pane">
<p>
    <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    <hr>
    <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
    <hr>
</p>
</div>

有没有其他人遇到过这种行为，并找到了一种通过在各处添加<p>标签来修复它的方法？

4

6 回答 6

2

有必要把它包装成一个段落吗？如果没有，那么您可能会丢失该标签，然后它就可以正常工作。http://jsfiddle.net/bqhC9/

<div id="pane">
    <p>
        <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    </p>
        <hr>
    <p>    
        <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
    </p>    
        <hr>

    </div>
于 2012-09-26T00:38:24.403 回答
2

您不能在标签<hr>中放置一个 inside 。<p>如果您尝试这样做，浏览器会通过<p>为您关闭标签来自动更正它。第二个链接不再位于<p>元素内，因此您的 CSS 规则不再适用。

这就是浏览器修复您的代码的原因，也是您的 CSS 类不再适用的原因。

<div id="pane">
<p>
    <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    </p><hr>
    <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff

<p></p>
</div>
于 2012-09-26T00:40:42.637 回答
1

你最好<p>, <hr> 不要使用<p>.

a.link设置将显示 a 标签的样式，display:block就像封闭<p>标签一样。

还自动关闭您的<hr/>

然后更正您的 css 选择器：#pane > a.link如果您实际上需要具有选择性。单独设置样式可能会更好a.link，这样您以后可以在需要时用另一个选择器覆盖它，而不会遇到特异性问题。

于 2012-09-26T01:37:40.483 回答
1

链接的集合可能更适合无​​序列表 ( UL)，可能位于NAV.

您的问题是由于HR内部P无法验证（并且有充分的理由）引起的。为了确认，我使用了这个示例：

<!doctype html>
<html>
<head>
    <title>Test</title>
</head>
<body>
<div id="pane">
<p>
    <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    <hr>
    <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
    <hr>
</p>
</div>
</body>
</html>

如果 p 元素后面紧跟 ...HR...，则可以省略 p 元素的结束标记

来源：http ://www.w3.org/TR/html-markup/p.html#p

正如@Bill 指出的那样，这会导致解析器P在您不期望的时候关闭它。

AnHR 代表一个主题中断，它在段落内部在语义上是无效的。从逻辑上讲（至少在英语中），一个段落应该包含关于单个主题的相关想法的集合，所以这是有道理的。

于 2012-09-26T00:41:54.163 回答
1

hr 不能在 p 标签中。您可以将 p 标签更改为 div

    <!doctype html>
<html>
<head>
<style>
#pane {
float: right;
width: 800px;
}

#pane div {
  margin-left: 15px;
  font-family: verdana;
  font-size: 12px;
}

#pane div a.large    { font-size: 26px; }
</style>
</head>
<body>
<div id="pane">
<div>
    <a href="http://www.google.com" class="large">Google</a> - For finding stuff
    <hr/>
    <a href="http://www.newegg.com" class="large">Newegg</a> - For buying stuff
    <hr/>
</div>
</div>
</body>
</html>
于 2012-09-26T00:45:52.053 回答
0

我认为您的 HR 标签有问题，在 XHTML 中您必须关闭标签。所以你的人力资源应该看起来像<hr/>

    <div id="pane">
<p>
    <a href="http://www.google.com" class="link">Google</a> - For finding stuff
    <hr/>
    <a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
    <hr/>
</p>
</div>

比它应该工作，没有理由不这样做。

于 2012-09-26T00:43:46.720 回答