Ответ 1
Используя точки (.), вы можете объединить несколько классов в группу
.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix {
...
}
Я пытаюсь создать некоторый вывод 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; }
Я не могу просто ссылаться на node, поскольку он используется в других местах для других целей. Я хочу быть конкретным и выбирать только этот класс:
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 {
...
}
Возможно, я не даю вам ответ, который вам нужен, но имена классов не могут содержать пробелы.
Элемент может иметь несколько классов, что позволяет сочетать несколько правил стилизации для разных классов применительно к одному элементу.
Если в атрибуте класса есть пробелы, он создает элемент с несколькими классами, ограниченный пробелами.
Например, если у вас есть такой элемент
<div class="big red outlined"></div>
и у вас был CSS, как этот
.big {
width: 1000px;
height: 1000px;
}
.red {
color: red;
}
.outlined {
border: 1px solid black;
}
Все три стиля будут применены к одиночному div, чтобы сделать его большим, красным и обрисованным.
В вашем случае похоже, что вы пытаетесь получить доступ к определенному элементу, что и является целью атрибута id
. Обратите внимание, что node имеет уникальный идентификатор:
<article id="node-38">
Вы можете получить доступ к элементу с определенным идентификатором в CSS с помощью селектора #
, например
#node-38 {
//style goes here
}
В вашем случае вы, вероятно, захотите сделать что-то вроде этого:
#node-38 .header h2 {
//style goes here
}
Эти пространства эффективно представляют собой несколько классов для одного элемента, поэтому тэг <article>
имеет класс "node" и "node -article" и т.д. и т.д.
Итак, если у вас есть:
.node { background-color: black; }
.node-article { color: white; }
Тогда в статье будет черный фон и белый текст. Оба будут применены.
Также помните, что вы можете ссылаться на теги и идентификаторы, поэтому, чтобы добраться до вашего H2, вы могли бы сделать:
article header h2 { .... }
или
#node-38 header h2 { .... }
И вам не обязательно нужен "заголовок" там, в зависимости от того, чего вы хотите достичь.
Если вы хотите выбрать все <h2>
, которые являются потомками тегов <article>
, с классом "node -article", вы можете сделать это:
article.node-article 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;}
В этом случае три отдельных класса node
node-article
node-teaser
будут иметь тот же стиль, что и красный цвет фона. Теперь, если у вас есть несколько элементов с одним классом i.e. 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;}
Когда вы определяете элемент с классом, включая пробелы, фактически обозначает несколько классов.
В этой статье используются следующие классы: node, node -article, node -teaser, contextual-links-region, node -even, published, with-comments, node -teaser и clearfix.
Вы можете использовать любой из этих классов при таргетинге на элемент. Если бы я ссылался на тег H2, я бы сделал что-то вроде
article#node-38 header h2{
Это гораздо более конкретный способ настройки, чем использование всех этих классов. это более короткий синтаксис и более конкретный элемент, который вы хотите стилизовать.