结合一类选择与ID

我使用下面的CSS：结合一类选择与ID

/* style.css */ 
#someId { 
    background-color: red; 
} 
#someId.medium { 
    width: 300px; 
} 
#someId.large { 
    width: 500px; 
}

与HTML：

<!-- medium.html --> 
<div id="someId" class="medium">hello, world</div>

和

<!-- large.html --> 
<div id="someId" class="large">hello, world</div>

我知道上面上的FireFox工作正常和歌剧，而且，它确实不是工作在IE6（惊喜，惊喜）。

我的问题是：

是上述CSS正确根据CSS-规范（和我在哪里可以找到这个具体问题）？

什么浏览器（在什么平台上）做&不支持？

更新：
这些ID是每个页面中唯一的。我试图通过medium.html和large.html来沟通，但显然它不够明显。

更新2：
上面的代码示例只是为了说明我的问题。它不是生产代码的一部分，它不是完整的。简而言之，这只是一个例子，用一个非常具体的解决方案来展示问题。

来源

2010-02-25 Jacco

嗯关于那些重复的id属性.. – 2010-02-25 12:58:17

这些ID是唯一的每个文档。 – Jacco 2010-02-25 13:56:52

quirksmode有一个表格，其中包括浏览器支持哪些选择器。不幸的是，没有结合选择器的测试。但ie6失败multiple classes这并不令人感到意外。

w3c css specification介绍如何CSS选择器要工作，有一个DIV.warning和E#myid这是不完全喜欢你的，但建议它应该工作（也许是在页面解释我没有读这一切;））

来源

2010-02-25 11:03:47 Mathieu

IE6失败的多个类？Lame。 – casraf 2010-02-25 11:13:10

跛脚它可能是，它仍然是我的要求让它在IE6中工作 – Jacco 2010-02-25 11:17:27

应该工作！这很奇怪。尝试翻转它们，如.large#someId。

来源

2010-02-25 10:53:21 casraf

应该在工作吗？哪里？在什么平台上用什么浏览器？请更具体。 – Jacco 2010-02-25 10:55:10

应该在任何地方工作，这是一个非常基本的选择，它甚至不是一个假的东西。 – casraf 2010-02-25 10:56:07

欢迎来到跨浏览器开发:( – Jacco 2010-02-25 10:57:34

Crikey。我从来没有遇到过这个，但你完全正确。你的代码应该像你期待的那样工作。

我很确定只有IE 6会遇到问题。

来源

2010-02-25 12:05:44

如果你不需要“#someId”作为一个id你可以把它变成一个类“.someId”，然后使用其他两个类来扩展需要的地方......就像这个class =“someId medium”等。试试这个，看看它是否会工作。除此之外，它还是一个更好的解决方案，因为在一个页面上不能有两个同名的ID。

.someId { 
    background-color: red; 
} 
.medium { 
    width: 300px; 
} 
.large { 
    width: 500px; 
}

然后..

<div class="someId medium">hello, world</div>

或

<div class="someId large">hello, world</div>

来源

2010-02-25 12:31:52 aleksandar

由于IE6不支持多个类，您的解决方案没有区别原始的，但我需要的ID无论如何。此外，身份证是唯一的每个文件。 – Jacco 2010-02-25 12:37:41

好吧，我试过... :( 无论如何，你仍然不能有更多，然后在同一页上有一个唯一的ID 你是否是因为我使用这种方法写css时，它总是为我工作。使用IETester测试im ... – aleksandar 2010-02-25 12:46:52

IE 6支持HTML中的多个类，它不支持正确的是多重class * selector * in CSS。所以'class =“someId medium”'可以工作，但对于IE 6，'.someId.medium'和'.medium'是相同的选择要么。 – 2010-02-25 12:49:53

不知道拖着Javascript库到组合有可能在你的应用程序，但使用jQuery的时候很多CSS的并不在IE6很好地工作是可能的。

但是，如果你没有其他用途的24kb jQuery库，它似乎是一个单一的CSS属性的沉重插件。也许你可以与优雅退化？

来源

2010-02-25 14:08:42

使用JavaScript解决CSS问题会混合脚本和布局。所以这个选项已经结束了。还有其他的选择来解决这个问题。如果它只是IE6，我们将编写它修复在一个单独的样式表。 – Jacco 2010-02-25 14:15:58

你可以尝试的一件事情是比你想要的更冗长。添加到类的名字，像这样：

<div id="someId" class="someId-medium">hello, world</div>

或

<div id="someId" class="someId-large">hello, world</div>

，然后改变你的CSS这样的：

#someId { 
    background-color: red; 
} 
.someId-medium { 
    width: 300px; 
} 
.someId-large { 
    width: 500px; 
}

来源

2010-02-25 15:12:14

这是备份计划。 – Jacco 2010-02-25 15:13:16

是的，我同意;这并不理想。 – 2010-02-25 15:19:19

像一些如前所述，ID的唯一标识符，因此应仅在页面中使用一次。通常情况下，ID将用于标记中的主要部分，如#header，#content＃footer等等，其余部分仅使用类。

至于您的文本，将#someId更改为.someId，然后您可以使用.large或.medium，因为您可以将多个类应用于元素。

<div class="someId large">hello, world</div>

而且你的CSS将

.someId { background-color: #ccc; } 
.large { font-size: 50px; } 
.medium { font-size: 25px; }

而且......如果文本“你好，世界”为标题，我强烈建议你使用正确的元素（H1，H2，等等。 ..）并调整他们的风格，而不是创建新的。

希望这会有所帮助！

编辑：对于下面的评论，这里是一个小的HTML代码，我刚刚在IE6中测试过，并且可以工作。它也适用于FF和Opera，所以我假设它也可以在Safari和Chrome中运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>An XHTML 1.0 Strict standard template</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <style type="text/css"> 
    .something { background-color: #ccc; } 
    .else { color: #090; } 
    </style> 
</head> 

<body> 

    <div class="something">This is just something</div> 
    <div class="else">This is just else</div> 
    <div class="something else">This is something else</div> 

</body> 
</html>

来源

2010-02-25 18:52:23 Karinne

这个问题是关于与规范结合的跨浏览器功能支持。 – Jacco 2010-02-25 22:28:04

即使在IE6中，多个类也可以工作。请参阅上面编辑的回复 – Karinne 2010-02-26 15:15:12

结合一类选择与ID

回答

相关问题