Как ссылаться на длинное имя класса с пробелами в 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. Обратите внимание, что узел имеет уникальный идентификатор:

<article id="node-38">

Вы можете получить доступ к элементу с определенным идентификатором в CSS с помощью селектора #, например,

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

Тогда статья будет иметь черный фон и белый текст. Оба будут применяться.

Также помните, что вы можете ссылаться на теги и идентификаторы, поэтому, чтобы попасть в H2, вы можете сделать:

article header h2 { .... }

или

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

И вам не обязательно нужен «заголовок», в зависимости от того, чего вы хотите достичь.

Если вы хотите выбрать все <h2> s, которые являются потомками тегов <article> с классом "node-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

Когда вы определяете элемент с классом, пробелы фактически обозначают несколько классов.

К этой статье на самом деле применяются следующие классы: узел, узел-статья, узел-тизер, контекстная-область ссылок, даже узел, опубликованный, с комментариями, узел-тизер и clearfix.

Вы можете использовать любой из этих классов при нацеливании на элемент. Если бы я ссылался на тег H2, я бы сделал что-то вроде

    article#node-38 header h2{

Это гораздо более конкретный способ нацеливания, чем использование всех этих классов. это более короткий синтаксис и более специфичный для элемента, который вы хотите стилизовать.