代码之家 › 专栏 › 技术社区 › Jacco

将类选择器与ID组合在一起

css-selectors css html

Jacco · 技术社区 · 15 年前

我使用以下CSS:

/* 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>

我知道上面在火狐和Opera上很好用,而且不研究IE6(惊喜,惊喜)。

我的问题是:

根据CSS规范,上述CSS是否正确(在哪里可以找到此特定问题)?

哪些浏览器(在哪个平台上)不支持此功能?

更新:
每个页面的ID都是唯一的。我试图通过 medium.html 和 large.html 但显然这还不够明显。

更新2:
上面的代码示例只是为了说明我的问题而编写的。它不是生产代码的一部分,并不意味着完整。简而言之,它只是一个用非常具体的解决方案演示问题的示例。

7 回复 | 直到 13 年前

Mathieu 15 年前

quirksmode 有一个表,其中选择器(除其他外)浏览器支持该表。不幸的是,没有测试组合选择器。但由于IE6失败 multiple classes 这并不奇怪。

w3c css specification 解释CSS选择器应该如何工作,有一个 DIV.warning 和 E#myid 这和你的不完全一样,但建议它应该有效(也许是在我没有完全阅读的那一页中解释的;)

aleksandar 15 年前

如果您不需要“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>

casraf 15 年前

应该在工作!真奇怪。试着把它们翻过来,比如 .large#someId .

Scott Cranfill 15 年前

有一件事你可以尝试比你想的更详细。添加到类名中,如下所示:

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

Paul D. Waite 15 年前

克里奇。我以前从没见过这个,但你完全是对的。您的代码应该按预期工作。

我很确定只有6号才有问题。

Karinne 15 年前

像上面提到的一样,ID是一个唯一的标识符,因此在一个页面中只能使用一次。通常,ID将用于标记中的主要部分,如页眉、内容页脚等…剩下的,只需要上课。

对于文本,将someID更改为.someID,然后可以使用.large或.medium,因为可以对元素应用多个类。

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

你的CSS应该是

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

也。。。如果文本“hello,world”是标题,我强烈建议您使用适当的元素(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>

Adrian Schmidt 15 年前

不确定在应用程序中是否可以将javascript库拖动到混合中,但是在使用jquery时,许多在IE6中不太好用的CSS是可能的。

但是,如果对于24kbjquery库没有其他用途,那么对于单个css属性来说,它似乎是一个很重要的插件。也许你可以优雅的降级?