如何组合 CSS 中的类和 ID 选择器来定位特定的 HTML 元素？

在 CSS 选择器中组合类和 ID

设计 HTML 元素样式时，通常使用类和 ID 来定位特定元素。在某些情况下，您可能需要结合这两个标准。以下是如何实现这一点：

使用 ID 和 Class 查询元素

考虑以下 HTML：

<div>
<p>要设置此元素的样式，例如它同时具有“sectionA”类和“content”ID，请使用以下 CSS选择器：</p>
<pre class="brush:php;toolbar:false">div#content.sectionA

在此选择器中，“#”符号位于 ID 之前，而“.”位于 ID 之前。符号位于类之前。这可确保 CSS 规则仅适用于满足这两个条件的元素。

附加说明

请记住，选择器中类和 ID 的顺序很重要。如果您编写“.sectionA#content”，它将选择具有“sectionA”类和任何 ID 的元素，不一定是“内容”。

替代方法

使用上述技术，您可以组合多个类或多个 ID。但是，还有其他方法可以避免长选择器：

1. 连接类： 连接类名（例如“content-sectionA”或“sectionA-content”）以创建唯一的类。这将选择器简化为“.content-sectionA”或“.sectionA-content”。
2. 使用子选择器：如果该类应用于子元素，您可以使用“> ;”选择器中的符号，例如：“div#content > p.sectionA.”