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

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

51 голосов
/ 18 июня 2010

Существует ли в 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 ]

71 голосов
/ 18 июня 2010

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

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

против 

.two { border: 6px dashed green }
.one { border: 6px dashed orange }
20 голосов
/ 18 июня 2010

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

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

4 голосов
/ 18 июня 2010

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

3 голосов
/ 18 июня 2010

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

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

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

2 голосов
/ 18 июня 2010

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

2 голосов
/ 18 июня 2010

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

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

1 голос
/ 18 июня 2010

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

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

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

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

1 голос
/ 18 июня 2010

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

...