Несколько Классов 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 }
vs
.two { border: 6px dashed green }
.one { border: 6px dashed orange }
Думаю, ясно, что такое правило неприменимо. Правило .one имеет ту же специфику, что и правило .two, поэтому в соответствии со стандартом CSS свойства в блоке .two переопределяют свойства в .one, поскольку блок .two появляется позже. Нигде не упоминается порядок слов в атрибуте class.
Класс , определенный последним в CSS , является преимуществом в этих случаях. Порядок в элементе не имеет значения, он одинаков для всех браузеров, о которых я знаю, я постараюсь указать соответствующие биты спецификации.
весь класс не выигрывает, свойства по отдельности выигрывают, если у .one есть свойство, которое .two вы бы не использовали Конечно, вы увидите это свойство на обоих элементах
Как было отмечено в других ответах, порядок, объявленный в атрибуте class, не имеет никакого эффекта - приоритет исходит из порядка объявлений в файле CSS.
Однако, если вы действительно хотите создать что-то, что позволит вам "подделать" приоритет в атрибуте class, вы можете попробовать:
.one-first { border: 6px dashed green }
.two-first { border: 6px dashed orange }
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
And then
<div class="one-first two"/>
and
<div class="two-first one"/>
Will order the priority with the last one winning (аналогично тому, как в CSS proprty, идущий последним, получает приоритет)
.При использовании нескольких классов для определения таблицы стилей элемента вы можете использовать !important, чтобы переопределить "каскадирование" таблицы стилей.
.one { border: 6px dashed green !important }
.two { border: 6px dashed orange }
Это сделает ваши div'ы зелеными.
Порядок атрибута класса не имеет значения. Это зависит от нескольких вещей, в вашем случае это порядок, в котором написан ваш css.
Оба стиля имеют одинаковую специфику, поэтому стиль .two имеет приоритет над стилем .one, потому что он ниже в теге стиля.
переопределение будет происходить в том порядке, в котором объявлены классы. так что .2 всегда выигрывает
Если есть сомнения, просмотрите страницу в FireBug. Он вычеркнет классы, которые были переопределены, и покажет порядок, в котором они применяются на странице.
Также обратите внимание, что встроенные стили имеют приоритет над стилями, объявленными во внешней таблице стилей. Если вы хотите разорвать каскадную цепочку применимости, вы можете использовать объявление ! Important , как в
p {margin: 10px 5px 0 10px !important}
. Это заставит объявление ! Important переопределить другие, независимо от положения. Некоторые считают это плохой практикой, но при разумном использовании она может пригодиться.