Использование нескольких классов в одном элементе и специфика

Question

Просто интересно, когда вы используете несколько классов для одного элемента, например class="foo bar", и эти классы настраиваются, как показано ниже:

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

Какой класс будет иметь специфичность?Будет ли маржа 10px или 0px?

Answer 1

Работает на основе приоритета в CSS.Поэтому элемент, который должен появиться совсем недавно, переопределит все предыдущие стили.

CASE 1

.foo  { background : red; }
.bar  { background : blue; }

class = 'foo bar' будет синим в этомэкземпляр.

CASE 2

.bar  { background : blue; }
.foo  { background : red; } 

class = 'foo bar' будет красным в этом случае.

Рабочий пример

Answer 2

Кроме того, если вы хотите настроить таргетинг на элемент, который имеет только оба класса, вы можете использовать этот синтаксис:

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

Answer 3

Одно имя класса имеет тот же вес. В таком случае правило, указанное в списке первым, будет заменено вторым, и, следовательно, элемент будет иметь margin-right: 0px;

Вот простой пример с использованием color вместо поля, потому что его проще визуализировать. Значение, указанное в bar, будет выбрано браузером.

Answer 4

Кроме того, более «конкретный» класс переопределяет более общий:

HTML:

<div class="foo">
    <div class="bar">Hello World!</div>
</div>

Со следующим CSS:

.foo .bar { margin-left:25px }
.bar { margin-left:0px }

Обратите внимание, как у внутреннего элемента div остается поле в 25 пикселей слева?

Кроме того, прочитайте аргумент "важный" после предоставления значения:

.bar { margin-left:0px!important }

Выезд