Определение класса css с несколькими идентификаторами

Я только начал изучать CSS и столкнулся с примером, который я не совсем понимаю. Я не могу описать это хорошо, что затруднило найти ответ (я извиняюсь, если уже существует ответ, который я упустил).

Мой вопрос касается следующего примера:

.theme-light.slider-wrapper {
  background: #fff;
  padding: 10px;
}

Я понимаю, что классы в CSS определяются с помощью синтаксиса .name, который затем можно использовать в тэгах:

<div class="name"></div>

Я не понимаю, как работает "двойное" объявление .name1 .name2 и как это будет использоваться в теге.

В соответствующей заметке пример веб-сайта, который мне был предоставлен, использует идентификатор в теге, который не существует в таблице стилей.. где еще это могло быть определено?

Ответ 1

Возможно, этот пример использования очистит вас.

Представьте себе следующий сценарий.

У вас будет:

<div class="general-div">some stuff</div>
<div class="general-div special">some stuff</div>
<div class="general-div">some stuff</div>
<div class="extra-div">some stuff</div>
<div class="extra-div special">some stuff</div>

И давайте предположим, что вы хотите, чтобы div имел одинаковые атрибуты следующим образом:

.general-div {width: 300px; height: 300px; border: 1px solid #000;}

.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

Но вы хотите, чтобы .general-div с .special классом имел красный фон и extra-div с .special классом, чтобы иметь синий фон.

Вы пишете:

.general-div.special {background-color: red;}

.extra-div.special {background-color: blue;}

Надеюсь, что это очистит использование ситуации, о которой идет речь.

Ответ 2

В CSS с селектором .className вы можете определить свойства для каждого элемента с классом className. У каждого элемента может быть больше классов. Значение селектора с большим количеством классов зависит от того, как вы их объединяете в своих объявлениях:

.class1.class2 будет соответствовать только элементам, для которых определены оба класса.
```
.class1.class2 { background: red; }
<div class="class1 class2"></div>
```
.class1, .class2 будет соответствовать элементам с .class1 или .class2
```
.class1, .class2 { background: yellow; }
<div class="class1"></div>
<div class="class2"></div>
```
.class1 .class2 будет соответствовать только элементам с классом2 внутри элементов с классом 1.
```
.class1 .class2 { background: blue; }
<div class="class1">
    <div class="class2"></div>
</div>
```

Ответ 3

.theme-light.slider-wrapper просто означает, что он имеет оба класса. В HTML это может выглядеть так:

<div class="theme-light slider-wrapper"></div>

Что касается идентификатора, нет причин, по которым идентификатор в HTML должен быть указан в CSS

Ответ 4

Как использовать двойные классы, например <div class="name1 name2"></div>?

Вы div должны иметь классы name1 и name2 (см. живую демонстрацию).

Как насчет .theme-light.slider-wrapper?

Это означает, что ваш элемент должен иметь классы theme-light и slide-wrapper (см. живую демонстрацию).

Это полезно для большего количества элементов. Вы хотите, чтобы некоторые элементы имели серый фон. Нет проблем! Добавьте их class gray и определите css:

.gray {
   background: #ddd;
}

Также вам нужно, чтобы некоторые элементы имели красный текст. Определить класс red-text с помощью css:

.red-text {
   color: red;
}

И конец вашего абзаца имеет серый фон и красный текст. Просто добавьте классы gray и red-text, подобные этому <p class="gray red-text">Lorem ipsum</p>.

Ответ 5

вы должны использовать

<div class="class1 class2">

применить несколько классов к объекту.

Ответ 6

Вот подробное объяснение вашего вопроса.

С: www.itsmesharath.in