В css приоритет: Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили – seodon.ru | Учебник CSS — Приоритеты стилей в CSS

Как работает CSS приоритет? - CodeRoad

Допустим, у меня есть следующие HTML:

<span>This is a test</span>

и если #id1, .class1 и .class2 имеют разные наборы взаимоисключающих правил CSS, то какой из них выигрывает? Я тестировал пример, и в одном случае он выбирает (я думаю) тот, который указан в нижней части файла CSS, но в другом случае он кажется недетерминированным.

Есть ли конкретное правило в этом случае?

html css

Поделиться Источник leora     13 апреля 2013 в 02:49

4 Ответов



5

Основной принцип каскадирования в CSS заключается в том, что у вас есть один элемент и одно или несколько правил CSS, которые применяются к одному и тому же элементу (потому что элемент соответствует их селекторам). В этом процессе вычисляются все применимые стили, все конфликты разрешаются (или каскадируются), а затем применяются.

Если правила и их объявления являются взаимоисключающими, то ни одно из них не имеет преимущества перед другими как

таковыми, поскольку нет никакого конфликта, который нужно разрешить, и поэтому нет ничего, что можно было бы переопределить. Например, если у вас есть эти правила:

#id1 {
    color: red;
}

.class1 {
    border-width: 1px;
}

.class2 {
    border-style: dashed;
}

Тогда ваш элемент будет иметь красный текст и пунктирную красную границу толщиной 1 пиксель. Там нет конфликтов, поэтому все они будут объединяться по сути. (Обратите внимание, что граница Красная из-за особого поведения .)

jsFiddle предварительный просмотр

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

Например, если у вас есть эти правила:

#id1 {
    color: red;
}

.class1 {
    text-decoration: underline;
    color: green;
}

.class2 {
    text-decoration: none;
    color: blue;
}

Тогда ваш элемент будет иметь красный текст без украшения, потому что

  • значение color в #id1 переопределяет это значение в обоих классах, и

  • значение text-decoration в .class2 переопределяет значение .class1 .

jsFiddle предварительный просмотр

Помните, что все это должно относиться к одному и тому же элементу. Если у вас есть родитель, у которого есть только ID, с дочерним элементом, у которого есть только класс, то ничего из этого не будет применяться, потому что вы имеете дело с совершенно отдельными элементами. Вместо этого в игру вступает наследование, которое также рассматривается в документе, на который я ссылаюсь выше.

Поделиться BoltClock     13 апреля 2013 в 02:57



0

ID будет иметь приоритет над классом.

Если элемент имеет одинаковые стили, определенные несколько раз с помощью ID, последний будет иметь приоритет над первым, за исключением случая, когда вы используете

!important


Порядок приоритета с CSS выглядит следующим образом:

1 . !важный

2 . Встроенные стили, которые определены внутри элемента HTML

3 . Внутренние стили, которые определены в разделе head

4 . Внешняя таблица стилей, которая является ссылкой на лист ( <link rel="stylesheet" type="text/css" href="style.css" /> )

5 . Браузер по умолчанию

Поделиться Eli     13 апреля 2013 в 02:55



0

Это легко-тот, который ближе и утонченнее победит (совсем как жизнь)

I.e.

Тогда у меня есть чистый лист:

Начните с класса-применить те (ака class1, class2)

Но вы знаете об этом человеке (id)

А потом применить это..

Так что (если есть "winner") идентификатор выигрывает

Если тег не имеет style в своих атрибутах-это выиграет

Поделиться Ed Heal     13 апреля 2013 в 04:32


Поделиться Axel A. García     13 апреля 2013 в 02:51



Приоритет правил CSS

Я видел: CSS 2, приоритет таблиц стилей, импортированных с помощью элемента link В каком порядке переопределяются таблицы стилей CSS? таблица стилей-может ли один файл CSS иметь приоритет над другим...


CSS приоритет

Моя веб-страница содержит: <link href=/Content/Site.css rel=stylesheet type=text/css /> <style type=text/css> td { padding-left:10px; } </style> Ссылочная таблица стилей содержит:...


Могу ли я изменить приоритет стиля css в Javascript?

Я кодирую онлайн-редактор css. Если я изменяю css элемента, используя как jQuery(selector).css() или element.style= , все они изменяют встроенный стиль элемента. Как вы знаете, встроенный стиль...


CSS приоритет стилей

Существует следующее HTML: <li class=tabs__item tabs__item_with_new_orders>123</li> Я хочу сделать следующие шаги: Чтобы задать свойства tabs_item CSS Установить свойство background из...


CSS Приоритет Стиля

Я только начал изучать курс по основному HTML & CSS. Я изучал приоритет, когда речь заходит о CSS селекторах сегодня. Теперь у нас есть следующее упражнение, которое мы ходили, и мне было...


css приоритет автономных атрибутов, таких как cellpadding

Я знаю, что встроенные стили через атрибут 'style' имеют приоритет над указанными во внешнем файле css. Но как насчет автономных атрибутов, таких как 'cellpadding'? Пример строки будет выглядеть...


CSS приоритет textbox больше MVC3

CSS по умолчанию соответствует стилю input[type=text]. Как я могу сделать это .wideTextBox имеет приоритет? @Html.TextBoxFor(model => model.ConsumerBatchInVM.OptInSmsMessage, new { @class =...


Приоритет CSS селекторов

Вот мой HTML: <input type='submit'> Этот CSS делает границу blue для этого входа: Demo input{ border: 1px solid red; } .clsname{ border: 1px solid blue; } Но это делает границу...


CSS !важно не брать приоритет?

У меня есть следующая структура dom: <div class=ui-tabs> <ul> <li class=ui-state-default ui-tabs-selected ui-state-active> <a href=#>Text</a> </li> </ul> И...


Bootstrap и grocery_CRUD css приоритет

Я нахожусь в веб-проекте, использующем стиль bootstrap, затем я включил структуру grocery_CRUD, и у меня начались проблемы с css. Кажется, grocery_CRUD имеет приоритет над файлами css, когда он...


css-не селектор-ломает приоритет?

В файле css последний определенный стиль имеет приоритет над предыдущими определенными стилями. Но при использовании not selector приоритет нарушается, и класс с not selector получает приоритет,...


Как работает приоритет CSS? (html, css)

Основным принципом каскадирования в CSS является то, что у вас есть один элемент и одно или несколько правил CSS, которые применяются к одному и тому же элементу ( потому что элемент соответствует их селекторам). В этом процессе все применимые стили вычисляются, при этом любые конфликты разрешаются (или каскадируются), а затем, ну, применяются.

Если правила и их объявления являются взаимоисключающими, то ни один из них "не побеждает" над кем-либо из себя как таковым, так как нет конфликта для решения, и поэтому ничего не следует отменять. Например, если у вас есть эти правила:

#id1 {
    color: red;
}

.class1 {
    border-width: 1px;
}

.class2 {
    border-style: dashed;
}

Затем ваш элемент будет иметь красный текст и пунктирную красную рамку толщиной в 1 пиксель. Конфликтов нет, поэтому все они будут объединены. (Обратите внимание, что граница красная из-за специального поведения.)

Предварительный просмотр jsFiddle

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

Например, если у вас есть эти правила:

#id1 {
    color: red;
}

.class1 {
    text-decoration: underline;
    color: green;
}

.class2 {
    text-decoration: none;
    color: blue;
}

Тогда ваш элемент будет иметь красный текст без украшения, потому что

  • значение color в #id1 переопределяет это в обоих классах и

  • значение

    text-decoration в .class2 переопределяет это значение в .class1.

jsFiddle preview

Помните, что все это должно применяться к одному и тому же элементу. Если у вас есть родитель, у которого только есть идентификатор, с дочерним, у которого есть только класс, то ни одно из этого не будет применяться, потому что вы имеете дело с совершенно отдельными элементами. Вместо этого наследуется наследование, которое также рассматривается в документе, который я ссылаюсь на выше.

Каскадность в CSS, приоритеты, кроссбраузерность. Видеокурс

И снова здравствуйте! Вы снова с нами, и мы продолжаем изучать видеокурс по основам CSS. На сегодняшнем видеоуроке мы рассмотрим один из основных принципов применения CSS — каскадность.

Что же такое каскадность в CSS

Расширяя свой проект, разработчик естественным образом увеличивает и количество стилей, применяемых к нему. Одно и то же свойство CSS может быть применено к разным элементам веб-странички, а также одному и тому же элементу в разных местах разметки может быть прописано свойство с разными значениями.

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

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

Приоритеты в CSS

CSS предлагает метод определения приоритетов.

  • Селектор тегов — 1 пункт;
  • Селектор классов — 10 пунктов;
  • Селектор по ID — 100 пунктов;
  • Встроенный стиль (inline) — 1000 пунктов.

Согласно этому методу применится тот стиль, приоритет которого выше. Но метод этот не работает для наследуемых свойств.

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

Немного о кроссбраузерности

Из нашего видеоурока вы также узнаете, что каждый браузер по умолчанию применяет к интернет-страничкам свои стили. Во многом они схожи, но есть в них и некоторые различия, поэтому в разных браузерах странички ваших проектов могут отображаться совершенно по-разному.

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Полезные ссылки:
Reset CSS http://meyerweb.com/eric/tools/css/reset/
Normalize.css http://necolas.github.io/normalize.css/

Рекомендуемые курсы

Приоритеты в CSS. | Блог веб дизайнера.

Приоритеты, которые нужно знать при написании кода css.

Здравствуйте. Сегодня поговорим о приоритетах при написании css кода. Зачастую, начинающие верстальщики мало уделяют этому вопросу внимания. К сожалению. И в результате удивляются, почему написанный ими css код работает не так, как задумывалось изначально, либо получился слишком большой, и так далее. Поэтому давайте рассмотрим основные правила приоритетов в css.

Наибольший приоритет имеет атрибут style. Пожалуйста, не путайте с тегом style, который и используется то либо в тестовых целях, либо в особо экзотических случаях.
Пример:



Цвет текста будет красным, несмотря на то, что в пользовательских стилях мы задали зеленый.
Следующим по значимости идет селектор идентификатора. Атрибут id превосходит по значимости и просто селектор тега и селектор класса.
Пример:



Цвет текста зеленый, так как задан в id.
Затем идут последовательно селекторы классов, псевдоклассов и атрибутов. Ниже, чем у них приоритет только у селекторов тегов.
Пример:



Цвет текста синий поскольку задан в селекторе атрибута.
Пример2:



Цвет текста желтый поскольку задан в классе.
Теперь рассмотрим составные селекторы. Общий вес составного селектора складывается из веса входящих в него селекторов. К примеру приоритет у селектора div p{} будет выше, чем у просто div{} или просто p{}. Или приоритет у p#text{} будет выше чем у div.box{} так как приоритет id выше, чем у class.
Пример:



Цвет текста красный поскольку общий вес div #text больше.
В случае с равными приоритетами преимущество будет у самого последнего селектора.
Для повышения приоритета можно к значению свойства селектора добавить !important.
Пример:



Такой вид повышения приоритета используется, как правило, для изменения вида внешних подключаемых модулей. Поскольку приоритеты внутри своего css файла мы и так можем задавать без помощи повышающих факторов.
На этом, пожалуй, буду заканчивать. До следующих постов.


См. так же:
Свойство float и проблемы с ним связанные.

css — CSS приоритет

Большинство ответов верны, когда говорят, что это проблема специфичности, но неверны или неполны в объяснении правил специфичности.

В основном в вашем случае .rightColoumn * "более конкретен", чем td и это правило побеждает, хотя оно наступает раньше.

Правила CSS 2.1 находятся здесь . Эти правила:

  • count 1, если декларация from является атрибутом 'style', а не правилом с селектором, 0 иначе (= a) (В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила имеют селекторов нет, поэтому a = 1, b = 0, c = 0 и d = 0.)
  • подсчитать количество атрибутов ID в селекторе (= b)
  • подсчитать количество других атрибутов и псевдоклассов в селекторе (= c)
  • подсчитать количество имен элементов и псевдоэлементов в селекторе (= d)

Объединение четырех чисел a-b-c-d (в системе счисления с большой базой) дает специфичность.

Так что в вашем случае у вас есть два правила:

.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */

0001 ниже, чем 0010, и поэтому первое правило выигрывает.

Есть два способа это исправить:

  1. Используйте !important, чтобы сделать правило более "важным". Я бы избегал этого, потому что это сбивает с толку, когда у вас много правил, распределенных по нескольким файлам.
  2. Используйте селектор с большей спецификацией для тд, который вы хотите изменить. Вы можете добавить к нему имя класса или идентификатор, и это позволит вам заменить правило из связанного файла CSS.

Пример:

<style>
  .rightColomn * { padding: 0; } /* 0010 */
  td#myUnpaddedTable { padding: 10px; } /* 0101 */
  td.anUnpaddedTable { padding: 10px; } /* 0011 */ 
</style>

Изменить . Исправлены правила специфичности для *. Комментарий Дэвида побудил меня перечитать спецификацию, которая показывает, что селектор * ничего не влияет на показатель специфичности.

ответил Mr. Shiny and New 安宇 20 MarpmFri, 20 Mar 2009 22:21:26 +03002009-03-20T22:21:26+03:0010 2009, 22:21:26

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *