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

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

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

Пример: оба div имеют оранжевый цвет в 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>

Ответы

Ответ 1

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

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

против

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

Как уже отмечалось в других ответах, порядок, объявленный в атрибуте 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, которая наступает последним с приоритетом.)

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

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