如何在 CSS 中引用带有空格的长类名？

Posted 2023-02-15

【中文标题】如何在 CSS 中引用带有空格的长类名？

【英文标题】：How to reference a long class name with spaces in CSS?

【发布时间】：2012-04-10 13:18:39

【问题描述】：

我正在尝试设置一些 Drupal 输出的样式。特别是，我试图引用一个具有超长名称（包括空格）的类。我不清楚这个的语法。原谅我，我是 CSS 新手。见：

<article id="node-38" class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" about="/~actionin/node/38" typeof="sioc:Item foaf:Document">
    <header>
        <h2 property="dc:title" datatype=""><a href="/~actionin/node/38">National Nutrition Month: March 2012: “Get Your Plate in Shape”</a></h2> 

我最终想引用 H2 属性。我在想它会是这样的：

.node SOMETHING-HERE .header h2  declaration; 

我不能只引用节点，因为它在其他地方用于其他目的。我想具体一点，只选择这个类：

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix"

【问题讨论】：

这实际上是 九个类，而不是一个中间有空格的类。

【参考方案1】：

使用点 (.) 可以将多个类组合为一个组

.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix 
 ...

【讨论】：

这和在类之间使用逗号有什么区别？

@LB-- 逗号表示 或 点表示 and 所以.node.node-article 表示一个元素需要同时具有两个类。其中.node, .node-article 表示它是否有至少其中之一。

【参考方案2】：

也许我没有给你你需要的答案，但是类名不能包含空格。

一个元素可以有多个类，这允许您将不同类的多个样式规则组合到一个元素上。

如果类属性中有空格，它会创建一个具有多个类的元素，并由空格分隔。

例如，如果你有这样的元素

<div class="big red outlined"></div>

你有这样的 CSS

.big 
  width: 1000px;
  height: 1000px;


.red 
  color: red;


.outlined 
  border: 1px solid black;

所有三种样式都将应用于单个 div 以使其变大、变红和带轮廓。

在您的情况下，您似乎正在尝试访问特定元素，这就是 id 属性的用途。请注意，该节点具有唯一的 id：

<article id="node-38">

您可以使用# 选择器在 CSS 中访问具有特定 id 的元素，如下所示

#node-38 
  //style goes here

在你的情况下，你可能想做这样的事情：

#node-38 .header h2  
  //style goes here 
 

【讨论】：

那么如何引用 H2 属性呢？有没有办法指定它属于具有 x、Y 和 Z 类的文章属性？

@Doug 如果你想引用一个特定的元素，你应该使用id 属性，或者如果你想要一个可以应用于一组新元素的样式，你应该添加另一个类。

@Doug 你可以做article.x.Y.Z h2

这是一个类名覆盖...但是你说“类名不能包含空格”。 InDesign5+ 这样做，很多网页设计师...有一条 W3C 规则说“它是无效的”？

@PeterKrauss According to the W3C html specification，“多个类名必须用空格字符分隔。”。如果类名可以包含空格，那么就没有办法消除单个类和多个类之间的歧义。因此，单个类名不能包含空格。

【参考方案3】：

这些空间实际上是一个元素上的多个类，因此您的 <article> 标记具有“node”类和“node-article”类等等。

如果你有：

.node  background-color: black; 
.node-article  color: white; 

那么文章将有黑色背景和白色文本。两者都将被应用。

还请记住，您可以引用标签和 ID，因此要获得 H2，您可以这样做：

article header h2  .... 

或

#node-38 header h2  .... 

而且你也不一定需要其中的“标题”，这取决于你想要实现的目标。

如果你想用“node-article”类选择所有<article>标签的后代<h2>s，那么你可以这样做：

article.node-article h2

【参考方案4】：

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix"

上面一行总共包含 9 个类，因为它们之间有空格。所以，node 是一个类，node-article 是另一个类，依此类推。如果你想引用一个类，那么你应该像这样写

.nodebackground-color:red;

如果你想一次引用多个类并且想应用相同的样式，那么你可以这样写

.node, node-article, node-teaserbackground-color:red;

在这种情况下，三个单独的类 node node-article node-teaser 将具有相同的样式，背景颜色为红色。现在，如果您有多个具有相同类的元素，即article，那么所有具有相同类的文章都将具有相同的样式。要将样式应用于唯一元素，您可以 id 而不是 class 像 id="node-38" 并且您可以使用 CSS 将样式应用于此元素，例如

article#node-38background-color:red;

选择/引用带有 id="node-38" 的父元素文章的 h2 内部标题，您可以编写

article#node-38 header h2background-color:red;

【参考方案5】：

当你定义一个带有类的元素时，包含空格实际上表示多个类。

那篇文章实际上应用了以下类：node、node-article、node-teaser、contextual-links-region、node-even、published、with-cmets、node-teaser 和 clearfix。

您可以在定位元素时使用这些类中的任何一个。如果我引用 H2 标签，我会做类似的事情

    article#node-38 header h2

这是一种比使用所有这些类更具体的定位方式。它的语法更短，更具体到您要设置样式的元素。