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

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

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

пример: оба divs оранжевого цвета в 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>
43
css web-standards

8 ответов

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

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

vs

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

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

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

16

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

.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 proprty, который приходит последним, принимая приоритет.)

4

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

2

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

1

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

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

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

в результате !важно!--5--> declration для переопределения других независимо положения. Некоторые считают это плохой практикой, но это может пригодиться, если использовать разумно.

1

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

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

1