Question

我在下面做了一个大DIV框中不同的单词有不同的字体大小。 HTML验证器向我发送错误消息，我不明白为什么。以下代码有什么问题？

我的CSS：

#fsize1 {
        font-size: 26px;   
        color: #ffffff;
}

#fsize2 {
    font-size: 23px;
    color: #ffffff;
}

#fsize3 {
    font-size: 20px;
    color: #ffffff;   
}

#fsize4 {
    font-size: 17px;
    color: #ffffff;
}

#fsize5 {
    font-size: 14px;   
    color: #ffffff;
}

#fsize6 {
    font-size: 11px;  
    color: #ffffff;  
}

#fsize1, #fsize2, #fsize3, #fsize4, #fsize5, #fsize6 {
   margin-right: 7px;
}

我的HTML

<a href="http://www.mysite.com" class="box1">
<div id="fsizes"><span id="fsize3">aaaaaaaa</span><span id="fsize5"> 
bbbbbbbbb</span><span id="fsize2">ccccccccccccc</span>
<span id="fsize6">ddddddddddddddddddddd</span><span
id="fsize1">eeeeeeeeeeeeee</span><span id="fsize4">fffffffff</span></div></a>

<a href="http://www.mysite.com" class="box2">
<div id="fsizes"><span id="fsize1">aaaaaaaa</span><span id="fsize2"> 
bbbbbbbbb</span><span id="fsize4">ccccccccccccc</span>
<span id="fsize3">ddddddddddddddddddddd</span><span
id="fsize5">eeeeeeeeeeeeee</span><span id="fsize6">fffffffff</span></div></a>

Answer 1

你有两个id为“fsizes”的div和两个id为“fsize3”的spans。

如果你想让它们在css中都有相同的引用，那么你应该给它们相同的类名，而不是相同的id。

要在css中使用类选择器，只需将“＃”替换为“。”

Answer 2

你在至少两个地方有相同的ID （虽然我的猜测无处不在）你在这里<span id="fsize3">：

<span id="fsize3">aaaaaaaa</span>

在这里：

<span id="fsize3">ddddddddddddddddddddd</span>

html spec表示这是无效的：

id = name [CS]此属性为元素指定名称。这个名字在文档中必须是唯一的

Answer 3

id不应在html文件中分配两次。你的div都有id fsizes。考虑将ID更改为类，并将您的css文件从#fsizes更改为.fsizes

Answer 4

要添加Javalsu提到的内容，您也可以使用相同ID的跨度。如果您打算像在OP中那样使用它们，我会将您的跨度ID更改为类。

例如，在html中：

<span class="fsize3">aaaaaaaaaa</span>

然后在你的CSS中：

SPAN.fsize3 { //do something; }

或

.fsize3 { //do something; }

我会将此作为评论添加到Javaslu的，但它不会让我。

Answer 5

您在代码中为多个元素使用相同的ID。

在HTML中，ID属性用于标识单个唯一元素。如果您希望将相同的样式规则应用于多个元素，则最好通过在要分组的元素上使用属性类来定义一组元素。

HTML

<div id="first-element" class="fsize1"></div>
<div id="second-element" class="fsize1"></div>
<div id="third-element" class="fsize1"></div>

CSS

.fsize1 {
    font-size: 26px;   
    color: #ffffff;
}

HTML验证程序报告错误，表明已定义ID

5 个答案: