在CSS中，我能同时使用DIV类和ID吗？

Question

我可以在CSS中同时使用DIV类和ID吗？ 例如：

<div class="x" id="y">
    --
</div>

- Billa

---

看起来你忘记使用 代码标记 了。 - zzzzBov

你的HTML代码没问题。你可以在同一个元素上同时指定class和id。 - matthewpavkov

你是不是想问：“如何同时使用类和ID？”？ - Christian Kuetbach

@Billa，阅读一下SO Mark-down editing help page可能会有帮助，以便使用Mark-down编辑器。 - David Thomas

当然可以，你甚至可以为每个元素指定多个类（例如：<div class="x z b">）。但你不能在一个元素上使用多个id（例如：<div id="y w">）。 - Lucius

谢谢大家这么快的回答 :) - Billa

Answer 1

可以，是的，你可以。

#y.x {
 /* will select element of id="y" that also has class="x" */
}

同样地：

.x#y {
 /* will select elements of class="x" that also have an id="y" */
}

顺便提一下，在某些用例中这可能会很有用（其中类被用来表示某种事件或交互），但在大多数情况下它并不是必需的，因为id在文档中本来就是唯一的。但如果你正在使用类来进行用户交互，那么了解这一点是有用的。

- David Thomas

---

不确定是否正确，但我记得在IE6中将ID放在第一位不起作用（我知道它很老，但还是想提一下，以防万一）。 - matthewpavkov

@Matthewpavkov，哎呀，我已经很久没有考虑IE6（或者IE7；耶，业余网络开发！），但是我理解你的观点。这可能很重要。+1，先生！=） - David Thomas

Answer 2

您可以在标签上使用尽可能多的类，但id必须在文档中是唯一的。 同时要注意不要过度使用div，当其他更语义化的标签能够胜任时，请勿使用它。

<p id="unique" class="x y z">Styled paragraph</p>

- Pete

Answer 3

当然可以。

您的HTML代码很好。要使用CSS样式来样式化元素，可以采用以下方法：

#y {
    ...
}

.x {
    ...
}

#y.x {
    ...
}

此外，您可以向元素添加任意数量的类。

<div id="id" class="classA classB classC ...">
</div>

您可以使用包含任意组合的类和ID的选择器来样式化该元素。例如：

#id.classA.classB.classC {
     ...
}

#id.classC {
}

- skajfes

---

这只是一条评论，不是对问题的回答。请使用“添加评论”来为作者提供建议。 - Thor

这是对问题的直接回答。简单的问题 - 简单的答案。顺便说一下，这是两年前的帖子。 - skajfes

帖子的年龄不影响其质量。现在看起来好多了 :) +1 - Thor

Answer 4

那是HTML语言，但是你可以将任何选择器组合在一起。

#x.y { }

（HTML 也没问题）

- Quentin

---

还有一个针对 DIV（而不是类）和 ID 的选择器：div.y {...}，尽管更改使用给定 id 引用的元素的 类型 听起来有些可疑，所以...不确定问题是否存在打字错误或其他问题 :-) - user166390

Answer 5

是的，你可以。

你只需要明白它们的用途，class更为普遍，可以使用多次，而id（就像你的身份证）只能使用一次。

这个优秀的教程帮助了我：

ID和Class之间的区别。

尽管这不是对你问题的确切回答，但我相信它会给你很大帮助！

祝你好运！

编辑：阅读你的问题后，我想澄清一下：

<div class="x" id="y">
    --
</div>

如果你想在CSS中用它们来进行样式设置，那么你应该像David Says所说的那样做：#x.y { }

- Trufa

Answer 6

如果你想在CSS中针对特定的类和ID进行选择，可以使用如下格式：div.x#y {}。

- matthewpavkov

Answer 7

#y.x 应该可以工作。而且它也很方便。您可以创建一个带有不同输出类型的页面。您可以为某个元素指定一个 id，但根据您想要的外观给它不同的类。

- GolezTrol

Answer 8

是的，在一个单独的区块中，您可以同时使用两者，但这并不常见。在样式设置时，您将调用两者，因此如果您没有正确选择“x”和“y”，它会导致一些歧义。 使用#表示ID，使用.表示类。对于整体区块，您可以进行分别的样式设置或编写：#x .y以进行样式设置。

- Azhaar Ahmad Jan

Answer 9

当然可以啊！那么适用于类“x”的CSS和适用于ID“y”的CSS都会应用到这个div上。

- gdj