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 
}

Answer 3

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

所以如果你有：

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

然后文章会有黑色背景和白色文字。两者都适用。

另外请记住，您可以引用标签和ID，以便进入H2，您可以这样做：

article header h2 { .... }

或

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

你也不一定需要“标题”，这取决于你想要达到的目标。

如果要使用“node-article”类选择<h2>标签后代的所有<article>，则可以执行以下操作：

article.node-article h2

Answer 4

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

在这种情况下，三个单独的类node node-article node-teaser将具有相同的样式，背景颜色为红色。现在，如果您有多个具有相同类的元素，即article，则具有相同类的所有文章将具有相同的样式。要将样式应用于唯一元素，您可以id代替class，例如id =“node-38”，您可以将CSS样式应用于此元素，例如

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

用父元素文章选择/引用h2里面的头文件，其中id =“node-38”你可以写

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

Answer 5

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

该文章实际上应用了以下类：node，node-article，node-teaser，contextual-links-region，node-even，published，with-comments，node-teaser和clearfix。

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

的事情

    article#node-38 header h2{

这是一种比使用所有这些类更具体的目标方式。它的语法较短，而且更适合您要设计样式的元素。

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

5 个答案: