Просто интересно, когда вы используете несколько классов для одного элемента, например class="foo bar", и эти классы настраиваются, как показано ниже:
.foo {
margin-right: 10px;
}
.bar {
margin-right: 0px;
}
Какой класс будет иметь специфику? Будет ли поле 10px или 0px?
Он работает на основе приоритета в CSS. Поэтому элемент, который должен произойти совсем недавно, будет отменять любые предыдущие стили.
CASE 1
.foo { background : red; }
.bar { background : blue; }
class = 'foo bar' в этом случае будет синим.
CASE 2
.bar { background : blue; }
.foo { background : red; }
class = 'foo bar' в этом случае будет красным.
Кроме того, если вы хотите настроить таргетинг на элемент, который имеет только оба класса, вы можете использовать этот синтаксис:
<ul>
<li class="foo first">Something</li>
<li class="foo">Somthing else</li>
<li class="foo">Something more</li>
</ul>
.foo {
color: red;
}
.foo.first {
color: blue
}
Одно имя класса имеет одинаковый вес. В таком сценарии правило, которое перечислено первым, будет перезаписано вторым, и, следовательно, элемент будет иметь margin-right: 0px;
Вот простой пример, используя color вместо поля, потому что его легче визуализировать. Значение, указанное в bar, будет выбрано браузером.
Кроме того, более "специфический" класс будет переопределять более общий:
HTML:
<div class="foo"> <div class="bar">Hello World!</div> </div>
Со следующим CSS:
.foo .bar { margin-left:25px }
.bar { margin-left:0px }
Обратите внимание на то, что внутренний div все еще имеет маркер 25 пикселей влево?
Кроме того, прочитайте аргумент "! important" после предоставления значения:
.bar { margin-left:0px!important }
Отъезд