Несколько CSS-классов: свойства перекрываются на основе определенного порядка

Есть ли в CSS правило, определяющее порядок каскадирования, когда в элементе определены несколько классов? (class="one two" против class="two one")

Прямо сейчас, кажется, нет такого эффекта.

Пример: оба блока оранжевого цвета в Firefox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <style>
      .one { border: 6px dashed green }
      .two { border: 6px dashed orange }
    </style>
  </head>

  <body>

  <div class="one two">
    hello world
  </div>

  <div class="two one">
    hello world
  </div>
Источник

8 ответов

Решение

Это зависит от того, какой из них объявлен последним в вашей таблице стилей. Например,

.one { border: 6px dashed green }
.two { border: 6px dashed orange }

против

.two { border: 6px dashed green }
.one { border: 6px dashed orange }
Источник

Класс, определенный последним в CSS, - вот что побеждает в этих случаях. Порядок элементов не имеет значения, он одинаков во всех браузерах, о которых я знаю, я постараюсь найти соответствующие биты спецификации.

Весь класс не выигрывает, свойства индивидуально выигрывают, если .one имел свойство, которое .two разве вы, конечно, не увидели бы эту собственность на обоих <div> элементы.

Источник

Порядок атрибута класса не имеет значения, один бит. Это зависит от нескольких вещей, в вашем случае это порядок, в котором написан ваш CSS.

Оба стиля имеют одинаковую специфику, поэтому стиль.two переопределяет стиль.one, поскольку он ниже в теге style.

Источник

Как отмечалось в других ответах, порядок, объявленный в атрибуте class, не имеет никакого эффекта - приоритет исходит от порядка объявлений в файле CSS.

Однако, если вы действительно хотите макетировать что-то, что позволяет вам "подделать" приоритет в атрибуте класса, вы можете попробовать:

   .one-first { border: 6px dashed green }
      .two-first { border: 6px dashed orange }

   .one { border: 6px dashed green }
      .two { border: 6px dashed orange }

А потом

   <div class="one-first two"/>

а также

   <div class="two-first one"/>

Приоритет будет упорядочен с последним выигрышем (в том же духе, что и свойство CSS, которое стоит последним с приоритетом.)

Источник

При использовании нескольких классов для определения таблицы стилей элемента вы можете использовать !important переопределить "каскадирование" таблицы стилей.

.one { border: 6px dashed green !important } 
.two { border: 6px dashed orange }

Это сделает ваши divs зелеными.

Источник

Я думаю, что ясно, что такое правило не применяется. Правило .one имеет ту же специфику, что и правило .twoТаким образом, в соответствии со стандартом CSS свойства в .two блок переопределить те в .one поскольку .two блок появится позже. Нигде не упоминается порядок слов в class приписывать.

Источник

Переопределение произойдет в том порядке, в котором объявлены классы. так. два всегда побеждает

Источник

Если есть сомнения, просмотрите страницу в FireBug. Он вычеркнет переопределенные классы и покажет порядок их применения на странице.

Также обратите внимание, что встроенные стили будут переопределять те, которые объявлены во внешней таблице стилей. Если вы хотите разорвать каскадную цепочку применимости, вы можете использовать !

p {margin: 10px 5px 0 10px !important}

Это приведет к тому, что ! Важное объявление переопределит других независимо от позиции. Некоторые считают, что это плохая практика, но она может пригодиться, если ее использовать разумно.

Источник
Другие вопросы по тегам