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

How to reference a long class name with spaces in CSS?

提问by Doug

I'm trying to style some Drupal output. In particular, I'm trying to reference a class with a super long name (that includes spaces). I'm unclear the syntax for this. Forgive me, I'm a CSS newbie. See:

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

I ultimately want to reference the H2 property. I was thinking it would be something like:

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

.node SOMETHING-HERE .header h2 { declaration; }

I cannot just reference the node, since it is used elsewhere for other purposes. I want to be specific and select only this class:

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

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

回答by joomlearner

Using dots (.) you can combine multiple class as a group

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

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

回答by Peter Olson

Maybe I'm not giving you the answer you need, but class names cannot contain spaces.

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

An element can have multiple classes, which allows you the combine multiple styling rules for different classes to apply to a single element.

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

If you have spaces in a class attribute, it creates an element with multiple classes, delimited by spaces.

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

For example, if you have an element like this

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

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

and you had CSS like this

你有这样的 CSS

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

.red {
  color: red;
}

.outlined {
  border: 1px solid black;
}

All three styles would be applied to the single div to make it big, red, and outlined.

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

In your case, it looks like you are trying to access a specific element, which is what the purpose of the idattribute is. Notice that the node has a unique id:

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

<article id="node-38">

You can access an element with a specific id in CSS by using the #selector, like this

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

#node-38 {
  //style goes here
}

In your case, you probably want to do something like this:

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

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

回答by joshuahealy

Those spaces are effectively multiple classes on the one element, so your <article>tag has the "node" class, and the "node-article" class, and so on and so on.

这些空间实际上是一个元素上的多个类，因此您的<article>标签具有“节点”类和“节点文章”类，依此类推。

So if you had:

所以如果你有：

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

Then the article would have a black background, and white text. Both would be applied.

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

Also remember you can reference tags, and ids, so to get to your H2 you could do:

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

article header h2 { .... }

or

或者

#node-38 header h2 { .... }

And you don't necessarily need the "header" in there either, depending on what you want to achieve.

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

If you want to select all <h2>s that are descendants of <article>tags with the "node-article" class, then you can do this:

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

article.node-article h2

回答by The Alpha

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

Above line contains total 9 classes because of spaces between them. so, nodeis a single class, node-articleis another class and so on. If you want to reference a class then you should write it like

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

.node{background-color:red;}

If you want to reference multiple classes at once and want to apply same styles then you can write like

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

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

In that case three individual classes nodenode-articlenode-teaserwill have the same style with background color red. Now if you have multiple elements with same class i.e. articlethen all article with same class will have same style. To apply a style to a unique element you can idinstead of classlike id="node-38" and you can apply style with CSS to this element like

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

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

to select/reference the h2 inside header with parent element article that has id="node-38" you can write

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

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

回答by Jesse Rice

When you define an element with a class, including spaces actually denotes multiple classes.

当您使用类定义元素时，包含空格实际上表示多个类。

That article actually has the following classes applied to it : node, node-article, node-teaser, contextual-links-region, node-even, published, with-comments, node-teaser, and clearfix.

那篇文章实际上应用了以下类：节点、节点文章、节点预告片、上下文链接区域、节点偶数、已发布、带有评论、节点预告片和 clearfix。

You could use any of those classes when targeting the element. If I were referencing the H2 tag I would do something like

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

    article#node-38 header h2{

This is a much more specific way to target than using all of those classes. it's shorter syntax, and more specific to the element you want to style.

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