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

我正在尝试设计一些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> 

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

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

使用点（.）可以将多个类组合为一个组

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

---

这些空间实际上是一个元素上的多个类，因此您的

标记具有“node”类和“node article”类，依此类推

如果你有：

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

然后文章将有一个黑色的背景和白色的文本。两者都适用

还请记住，您可以引用标记和ID，因此要访问H2，您可以执行以下操作：

article header h2 { .... }

或

你也不一定需要“标题”，这取决于你想要实现什么

如果要选择所有具有“node article”类的

标记的后代，则可以执行以下操作：

article.node-article h2

---

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

一个元素可以有多个类，这允许您将不同类的多个样式规则组合起来应用于单个元素

如果类属性中有空格，它将创建一个包含多个类的元素，并用空格分隔

例如，如果有这样一个元素

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

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

.red {
  color: red;
}

.outlined {
  border: 1px solid black;
}

#node-38 {
  //style goes here
}

所有这三种样式都将应用于单个div，使其变大、变红、变轮廓

在您的情况下，看起来您正在尝试访问特定元素，这就是

id

属性的用途。请注意，节点具有唯一的id：

<article id="node-38">

在您的情况下，您可能希望执行以下操作：

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

---

当用类定义元素时，包括空格实际上表示多个类

该文章实际上应用了以下类：节点、节点文章、节点摘要、上下文链接区域、节点偶数、已发布、带注释、节点摘要和clearfix

当以元素为目标时，可以使用这些类中的任何一个。如果我引用H2标记，我会做如下操作

    article#node-38 header h2{

这是一种比使用所有这些类更具体的目标方法。它的语法更短，并且更特定于要设置样式的元素

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

由于它们之间有空格，上面的行总共包含9个类。因此，

node

是一个类，

node-article

是另一个类，依此类推。如果你想引用一个类，那么你应该像

.node{background-color:red;}

如果您想同时引用多个类并应用相同的样式，那么您可以这样编写

.node, node-article, node-teaser{background-color:red;}

在这种情况下，三个单独的类

节点

节点文章

节点摘要

将具有相同的样式，背景颜色为红色。现在，如果有多个元素具有相同的类，即

文章

，那么具有相同类的所有文章将具有相同的样式。要将样式应用于唯一元素，您可以

id

而不是

class

like id=“node-38”，并且可以将样式与CSS一起应用于此元素，如

article#node-38{background-color:red;}

要选择/引用带有id=“node-38”的父元素文章的h2 inside标题，您可以编写

article#node-38 header h2{background-color:red;}

---

这实际上是九个类，而不是一个中间有空格的类。那么我如何引用H2属性呢？有没有办法指定它属于x、Y和Z类的article属性？@Doug如果要引用特定元素，应该使用

id

属性，如果您想要一个可以应用于一组新元素的stlye，也可以添加另一个类。@Doug您可以执行

article.x.Y.Z h2

这是一个按类名重写的操作。。。但是你说“类名不能包含空格”。InDesign5+这样做，很多网页设计师。。。W3C有一条规则说“它无效”？@PeterKrauss，“多个类名必须用空格字符分隔。”。如果类名可以包含空格，则无法消除单个类和多个类之间的歧义。因此，单个类名不能包含空格。这与在类之间使用逗号有什么区别？@LB--commas mean或dot means，因此

。node.node article

表示元素需要两个类。其中as

.node、.node article

表示它是否至少有一个。

article#node-38{background-color:red;}

article#node-38 header h2{background-color:red;}