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

Question

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

Answer 1

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

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

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