Определение класса 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