Css приоритет селекторов – Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили

Leave a Comment / Css / By /

Содержание

Приоритетность селекторов в CSS (специфичность селекторов, selector’s specificity)

Введение в использование CSS селекторов

Допустим, у Вас есть несколько селекторов которые ссылаются на один и тот же элемент:


div span { text-decoration:underline; }
span { text-decoration:none; }

Открыв HTML страницу где элемент span находится внутри элемента div мы увидим подчеркнутый текст. А если мы пойдем дальше и с помощью плагина Firebug посмотрим стили вложенного элемента, мы увидим следующее:


div span {
    text-decoration:underline;
}
span {
    text-decoration:none;
}

Сразу же возникает вопрос о причине такого поведения. Ведь второй селектор должен перекрывать первый учитывая каскадность стилей. Данный пример как нельзя четко показывает что такое специфичность селекторов.

Правила специфичности

Специфичность селекторов (selector’s specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.

В спецификации по CSS 2.1 этой теме посвящен небольшой раздел. Существует 4 правила по которым вычисляется специфичность селекторов:

  1. Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
  2. Второе место занимает присутствие ID в селекторе(#some-id).
  3. Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.
  4. Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).

Все 4 правила сводятся в одну систему a-b-c-d(где а — наивысший приоритет) и образуют специфичность.

Далее рассмотрим принцип построения такой системы специфичности на примере разнообразных селекторов:

СелекторСпецифичность a-b-c-dПравило №
*0-0-0-0—
li0-0-0-14
li:first-line 0-0-0-24
ul li0-0-0-24
ul ol+li0-0-0-34
form + *[type=text]0-0-1-13, 4
table tr td.second0-0-1-33, 4
h3.block.title.0-0-2-13, 4
#xyz0-1-0-02
style=» »1-0-0-01
Пример специфичности — правило №1:

<head>
<style type="text/css">
    #summary { color: red }
</style>
</head>
<body>
    <p>content</p>
</body>

Текст внутри элемента p будет отображаться синим цветом независимо от селектора с айди(id), где также указано свойство color со значением red. Правило номер 1 всегда перекрывает все селекторы и имеет наивысшую приоритетность.

Правило №2:

<head>
    <style type="text/css">
        #second { color:green; }
        ul li.second { color:blue; }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
    </ul>
</body>

Несмотря на то что селектор с id указан в стилях сверху, именно он повлияет на отображение документа, так как более специфичен нежели селектор с классом second.

Правило №3:

<head>
    <style type="text/css">
       input[type=text] { font-weight:bold; }
       form input { font-weight:normal; }
    </style>
</head>
<body>
    <form action="" method="post">
        <input type="text" name="Company" />
        <input type="submit" name="Ok" />
    </form>
</body>

Текст внутри поля ввода будет отображаться жирным, а второй селектор определит стили только для кнопки отправки запроса.

Вернемся к первому примеру этой статьи — правило №4:
div span { text-decoration:underline; }
span { text-decoration:none; }

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

div span { text-decoration:underline; }
body span { text-decoration:none; }

Теперь селекторы имеют одинаковый вес(0-0-0-2 = 0-0-0-2) касательно специфичности. Второй селектор просто перекроет свойство первого так как описан ниже.

Уверен, что большинство верстальщиков точно знают 2 первых правила специфичности селекторов про id и style и эта статья не была для них чем-то новым. Но не стоит забывать о двух оставшихся, ведь это может существенно приостановить процесс создания верстки и увеличить время выявления возникшей ошибки.

Вот и все о чем я хотел рассказать. Надеюсь, что статья была вам интересна.

—

Владислав Razor Чапюк, апрель 2009

Если Вам понравилась статья, проголосуйте за нее

Голосов: 35 Голосовать  

Селекторы в CSS. Приоритет селекторов

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.

Ниже приведены приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. Чем выше в списке находится пункт, тем ниже его приоритет, и наоборот.

  1. Стиль браузера.
  2. Стиль автора.
  3. Стиль пользователя.
  4. Стиль автора с добавлением!important.
  5. Стиль пользователя с добавлением!important.

Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.

Как задавать пользовательский стиль рассказывалось в (см. рис. 1.3 и 1.4).

!important

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

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

  • !important добавлен в авторский стиль — будет применяться стиль автора.
  • !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
  • !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль пользователя.
  • !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Синтаксис применения !important следующий.

Свойство: значение!important

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

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

Специфичность

Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.

* {} /* a=0 b=0 c=0 -> специфичность = 0 */ li {} /* a=0 b=0 c=1 -> специфичность = 1 */ li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */ ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */ li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */ #t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */ #content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

Встроенный стиль, добавляемый к тегу через атрибут style , имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили. Однако добавление !important перекрывает в том числе и встроенные стили.

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

В примере 19.1 показано, как влияет специфичность на стиль элементов списка.

Пример 19.1. Цвет списка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Список

В данном примере цвет текста списка задан зелёным, а второй пункт списка с помощью класса two выделен красным цветом. Вычисляем специфичность селектора #menu ul li — один идентификатор (100) и два тега (2) в сумме дают значение 102, а селектор .two будет иметь значение специфичности 10, что явно меньше. Поэтому текст окрашиваться красным цветом не будет. Чтобы исправить ситуацию, необходимо либо понизить специфичность первого селектора, либо повысить специфичность второго (пример 19.2).

Пример 19.2. Изменение специфичности

/* Понижаем

Селекторы атрибутов и универсальные селектор в CSS

Цель урока: знакомство с css селекторами атрибутов, а также универсальным селектором. Рассмотрены примеры создания стилей, приоритет селекторов и их группировка

CSS селекторы атрибутов

  1. Селектор атрибута, значение которого не важно

    2. Синтаксис:

    [атрибут]{
  свойство1: значение;
  свойство2: значение;
}
/* или */
x[атрибут]{
  свойство1: значение;
  свойство2: значение;
}

    [атрибут]{ свойство1: значение; свойство2: значение; } /* или */ x[атрибут]{ свойство1: значение; свойство2: значение; }

    где x — селектор (тег), для которого и создается правило

    Пример: В hrml-код страницы необходимо добавить правило для селектора атрибута:
    <html>
<head>
<style type="text/css">
...
</style>
</head>
<body>
<img src="1.jpg" alt="надпись">
</body>
</html>

    <html> <head> <style type=»text/css»> … </style> </head> <body> <img src=»1.jpg» alt=»надпись»> </body> </html>

    Необходимо: Создать правило для селектора img с атрибутом alt


    Выполнение:
    <style type="text/css">
img[alt]{
  border:1px solid red; /* граница красного цвета */
}
</style>

    <style type=»text/css»> img[alt]{ border:1px solid red; /* граница красного цвета */ } </style>

    Результат:

  2. Селектор атрибута со значением

Синтаксис:

[атрибут="значение"]{
  свойство1: значение;
  свойство2: значение;
}
/* или */
x[атрибут="значение"]{
  свойство1: значение;
  свойство2: значение;
}

[атрибут=»значение»]{ свойство1: значение; свойство2: значение; } /* или */ x[атрибут=»значение»]{ свойство1: значение; свойство2: значение; }

где x — селектор (тег), для которого и создается правило

Пример: В hrml-код страницы необходимо добавить правило для селектора атрибута:
<body>
<input type="text" value="логин"><br>
<input type="radio" value="yes">Да<br>
<input type="radio" value="no">Нет<br>
</body>
</html>

<body> <input type=»text» value=»логин»><br> <input type=»radio» value=»yes»>Да<br> <input type=»radio» value=»no»>Нет<br> </body> </html>

Необходимо: Создать правило для текстового поля, добавив рамку и внутренние отступы, и для radio кнокпи, скрыв ее (свойство display)


Выполнение:
input[type="text"]{
  padding:3px; /* внутренние отступы */
  border:1px solid red;
}
input[type="radio"]{
   display:none;/* скрываем элемент */
}

input[type=»text»]{ padding:3px; /* внутренние отступы */ border:1px solid red; } input[type=»radio»]{ display:none;/* скрываем элемент */ }

Результат:

Рассмотрим еще примеры:

Пример: Для цитатного текста (тег q), у которого установлен атрибут title, необходимо добавить свойство для цвета элемента. Цитатный текст без атрибута необходимо сделать курсивом


Выполнение:
<html>
<head>
<style type="text/css">

<html> <head> <style type=»text/css»>

q{
   font-style:italic;
}
q[title]{
   color:maroon;
}

q{ font-style:italic; } q[title]{ color:maroon; }

</style>
</head>
<body>
<p>Закон Мерфи гласит: 
<q>Если неприятность может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
<q title="Из законов Фергюсона-Мержевича">После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</q>.
</p> 
</body>
</html>

</style> </head> <body> <p>Закон Мерфи гласит: <q>Если неприятность может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: <q title=»Из законов Фергюсона-Мержевича»>После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</q>. </p> </body> </html>

Результат:

Закон Мерфи гласит:
Если неприятность может случиться, то она обязательно случится, можем ввести свое наблюдение:
После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом.

Пример: Для гиперссылки, которая выводится в новом окне (атрибут target="_blank") установить задний фон и отступ слева


Выполнение:
<html>
<head>
<style type="text/css">

<html> <head> <style type=»text/css»>

a[target="_blank"]{
	background-color:#00cc00;
	padding-left:15px
}

a[target=»_blank»]{ background-color:#00cc00; padding-left:15px }

</style>
</head>
<body>
<a href="2.html">Обычная ссылка</a> 
<a href="2.html" target="_blank">Ссылка в новом окне</a>
</body>
</html>

</style> </head> <body> <a href=»2.html»>Обычная ссылка</a> <a href=»2.html» target=»_blank»>Ссылка в новом окне</a> </body> </html>

Результат:

Дополнительные параметры в фильтрации атрибутов

[атрибут*=значение]{...}

[атрибут*=значение]{…}

Атрибут содержит данное значение (но не строго равняется ему)

Пример:

...
<style type="text/css">

… <style type=»text/css»>

div[id*=post]{color:red;}

div[id*=post]{color:red;}

</style>
</head>
<body>
<div>one</div> 
<div>two</div> 
<div>three</div>
 ...

</style> </head> <body> <div>one</div> <div>two</div> <div>three</div> …

Результат:

[атрибут^=значение]{...}

[атрибут^=значение]{…}

Атрибут начинается с данного значения

Пример:

div[id^=post]{color: red;}

div[id^=post]{color: red;}

...
<div>one</div> 
<div>two</div> 
<div>three</div>

… <div>one</div> <div>two</div> <div>three</div>

Результат:

[атрибут$=значение]{...}

[атрибут$=значение]{…}

Атрибут заканчивается на данное значение

div[id$=post]{color: red;}

div[id$=post]{color: red;}

...
<div>one</div> 
<div>two</div> 
<div>three</div>

… <div>one</div> <div>two</div> <div>three</div>

Результат:

Важно: необходимо обратить внимание на то, что данные примеры работают во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

Универсальный селектор CSS

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

Синтаксис:

*{
	свойство1: значение;
	свойство2: значение;
	свойство3: значение;
}

*{ свойство1: значение; свойство2: значение; свойство3: значение; }

Пример: для всех элементов страницы определить единое семейство шрифта и цвет шрифта


Выполнение:
*{
	font-family: Arial, Verdana, sans-serif;
	color: navy;
}

*{ font-family: Arial, Verdana, sans-serif; color: navy; }

Группировка CSS селекторов

Для сокращения записи правил в CSS принята группировка:

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

Как мы убедились, существует несколько способов создания связи между CSS и html-документом. Более того, к одному и тому же элементу веб-страницы могут быть назначены несколько стилей одновременно. В таком случае отображение такого элемента регулируется правилами приоритета селекторов CSS:

Общие правила:

Подробные правила:

  1. Внешняя таблица стилей (подключаемая методом связывания), ссылка на которую встречается в html-документе позже, имеет приоритет по отношению к внешней таблице стилей, ссылка на которую встречается раньше.

    2. В примере стили файла style2.css будут приоритетней стилей файла style1.css:

    <head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>

    <head> <link rel=»stylesheet» type=»text/css» href=»style1.css» /> <link rel=»stylesheet» type=»text/css» href=»style2.css» /> </head>

  2. Более конкретные стили имеют приоритет перед менее конкретными.
  • Стилевой класс приоритетнее стиля для конкретного тега:
    • p.classname {color:red} /* более высокий приоритет */ 
p {color:blue}

    p.classname {color:red} /* более высокий приоритет */ p {color:blue}

  • Универсальный id имеет более высокий приоритет, чем у класса:
    •   #in{color:red} /* более высокий приоритет */
  .news{color:blue}

    #in{color:red} /* более высокий приоритет */ .news{color:blue}

    </style></head> 
<body> 
<p>Параграф будет красного цвета</p>

    </style></head> <body> <p>Параграф будет красного цвета</p>

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

    • В примере стиль весь текст в рамках тегов p сделается красным вне зависимости от любых других переопределений стиля для тега p:

    ...
p {color: red !important} 
p.blue{color:blue}
...

    … p {color: red !important} p.blue{color:blue} …

    <body>
<p>Текст красный</p>
...

    <body> <p>Текст красный</p> …

Итак, приоритетность:

IIIIIIIV
!important;#id.class
:pseudo-class
[]atributes		стиль тегов
:pseudo-elements
  • В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее.

    • В примере приоритетным будет class2, то есть текст станет синего цвета:

    ...
p.class1 {color:red} /* более высокий приоритет */ 
p.class2 {color:blue}
...

    … p.class1 {color:red} /* более высокий приоритет */ p.class2 {color:blue} …

    <body>
<p>Текст синий</p>
...

    <body> <p>Текст синий</p> …

    Приоритет в конфликтах специфицированности селектора CSS (тип против селектора класса)

    TL; DR ответ

    Первое правило более специфично, чем второе, потому что оно имеет как тип, так и атрибутивную часть для селектора и, следовательно, имеет приоритет:

    input[type="text"] { }         /* type + attribute for specificity */
.top_bar_login_form_input { }  /* only class for specificity, so *less* specificity */

    Длинный ответ

    Можно подумать, что бит type="text" , который является селектором атрибутов, более специфичен, чем селектор классов, в соответствии с страницей MDN о специфике :

    Следующий список селекторов-это повышение специфичности:

    • Универсальные селекторы
    • Селектор типа
    • Селекторы классов
    • Селекторы атрибутов
    • Псевдоклассы
    • ID селекторы
    • Встроенный стиль

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

    Почему это вводит в заблуждение:

    (Танки до @BoltClock’s прозрения .)

    Вышесказанное только кажется правильным, но это потому, что вы обычно включаете элемент в селектор (например, input[type="text"] ) при выполнении селектора атрибутов. Однако, что подло: бит input имеет значение.

    Предположим, что мы имеем следующее markup:

    <input type="text" value="some value" />

    В следующем сценарии входные данные отображаются красным цветом :

    [type="text"] { color: green; }
.my-class { color: red; }             /* last rule matched */

    Если мы изменим правила в сценарии, входные данные будут отображаться зеленым цветом :

    .my-class { color: red; }
[type="text"] { color: green; }       /* last rule matched */

    Это связано с тем, что оба селектора имеют одинаковую специфику. Теперь введение селектора input в правило атрибутов сделает один из них более конкретным, что можно увидеть в этом сценарии :

    input[type="text"] { color: green; }  /* most _specific_ rule matched */
.my-class { color: red; }

    Спецификация W3 заставляет мою голову болеть, но у нее есть детали о том, почему это работает. См. также ответ от @BoltClock и комментарии в этих примерах кода для получения информации о том, как вычисляется специфичность.

    Каковы приоритеты среди CSS селекторов

    CSS вопрос: если два разных селектора применяются к элементу, кто выигрывает?

    Я знаю, что этого не должно произойти, но я хочу настроить устаревшее приложение, и CSS становится в середине.

    html css css-selectors

    Поделиться Источник flybywire     28 октября 2009 в 13:46

    9 Ответов


    43

    Кровавые детали в спецификации на самом деле достаточно читаемы. В заключение:

    1. Больше всего выигрывают правила !important и встроенные правила style .

    2. В противном случае, как правило, выигрывает более конкретный. #id -это более конкретный селектор, чем .classname -это более конкретный селектор, чем tagname .

    3. Там, где правила одинаково специфичны, побеждает тот, кто объявлен последним.

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

    Поделиться bobince     28 октября 2009 в 13:51


    6

    вы должны найти #no из id =A ,#no из class =B и #no из tag =c в селекторе

    ABC с более высоким значением выигрывает.

    .wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

    100>022>021

    так что #foo победит

    Поделиться jegan     13 декабря 2012 в 03:20


    5

    Это должно произойти! Вот почему он называется CASCADING таблиц стилей. Вы можете найти пример приоритетов здесь

    Поделиться Manu     28 октября 2009 в 13:51


    2

    Смотрите раздел специфичность заказа спецификации (вместе с rest этой главы как !важные правила и порядок отображения правил в таблице стилей также оказывают влияние).

    Поделиться Quentin     28 октября 2009 в 13:50


    2

    «#id «является более мощным, чем» .class «имя и» .class » является более мощным, чем «tag» имя. Но если мы подадим заявление»!важно», чем его приоритет является большинство из них.

    !
    • важный
    • встроенный стиль
    • идентификатор
    • класс
    • метка

    Поделиться Gaurav Tripathi     20 февраля 2016 в 12:35


    0

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

    Если два селектора одинаково специфичны, то более поздний выигрывает у первого.

    Существует три уровня специфичности: идентификатор, класс и элемент. Таким образом, #elem выигрывает над .elem , поскольку идентификатор более специфичен. .elem .cont выигрывает над .elem , так как имеет больше селекторов на том же уровне.

    Подробнее читайте в разделе «What happens when conflicts occur?» на Selectutorial .

    Поделиться Guffa     28 октября 2009 в 13:52

    Поделиться Paul Irish     28 октября 2009 в 13:53


    0

    CSS означает Каскадные Таблицы Стилей. Это означает, что правила применяются к элементам каскадным образом. Совершенно нормально, что различные селекторы применяются к элементу. Думает, например, о следующем:

    <div>
  <div>Test</div>
</div>

    Следующие правила повлияют на элемент «foo»:

    .wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

    Правила определения приоритетов можно найти здесь .

    Я всегда советую использовать плагин Firefox «firebug» . Он покажет вам, какие именно свойства оцениваются для конкретного элемента и почему, подчеркивая переопределения во время каскада.

    Поделиться Roberto Aloi     28 октября 2009 в 14:57


    0

    !
    1. важный
    2. встроенный стиль
    3. #id
    4. класс
    5. метка

    Поделиться niranjan     13 февраля 2016 в 06:44


    Создание макетов CSS с меньшим количеством селекторов?

    Каковы наилучшие методы для создания макетов CSS с меньшим количеством селекторов и меньшим количеством DIVs? Меньше селекторов означает меньше HTML и CSS, что проще в управлении. Как мы можем…


    Инструмент для проверки неиспользуемых селекторов CSS?

    Я знаю, что есть расширение, называемое Dust-Me Selectors для Firefox, а также что оно не смотрит на динамический HTML, созданный JavaScript. Я ищу инструмент (Ы), который может идентифицировать все…


    Использование прописных букв, тире или подчеркивания при именовании селекторов css

    Каковы наилучшие методы при именовании CSS селекторов? SomeContainerContent some_container_content some-container-content Я читал другие подобные вопросы здесь о переполнении стека, но общего…


    продолжение css имена селекторов

    Мне нужно постоянно иметь css имен селекторов. Например. eng1, eng2, eng3 …… eng100 { display: block; width:100px; height:20px; } Есть ли способ упомянуть css как вид массива? Спасибо за вашу…


    Производительность jquery селекторов против css3 селекторов

    Я довольно новичок в использовании селекторов css3 (или простых селекторов css в целом) и мне интересно сравнение производительности этих селекторов css против селекторов jquery или javascript?…


    Подсчет количества селекторов в файле css

    существует ли существующий plugin/app/program/script/whatever, который анализирует и подсчитывает css селекторов файла? я хочу проверить, не работает ли мой файл css в IE из-за того, что мой счетчик…


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

    Какой из CSS селекторов ниже вы бы предпочли? (примечание с использованием кавычек) [class*=col-] { /* all classes that contain ‘col’ */ … } [class*=’col-‘] { /* all classes that contain ‘col’ */…


    Приоритеты в пространстве kernel

    Мой вопрос касается kernel космического программирования. Предположим, что у нас есть 2 обработчика для: — аппаратное прерывание — /proc файл Возможно ли, когда аппаратный обработчик прерываний…


    Преимущества и недостатки использования селекторов ID в CSS?

    В этом посте говорилось о недостатке использования селекторов ID в CSS. Вы больше знаете о преимуществах и недостатках использования селекторов ID в CSS? Когда следует использовать селекторы ID и…


    Использование CSS-селекторов в HTML

    Как придать элементу тега <p> внутри третьего элемента тега <div> в исходном коде HTML цвет фона при использовании селекторов CSS?


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

    В файле css последний определенный стиль имеет приоритет над предыдущими определенными стилями.

    Но при использовании not selector приоритет нарушается, и класс с not selector получает приоритет, даже если он расположен в верхней части файла.

    Какова логика разрыва приоритетов?

    Пример :

    <html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      .red-with-not:not(.something) {
        background: red;
      }
      .red {
        background: red;
      }
      .blue {
        background: blue;
      }
    </style>
  </head>
  <body>
    <h2>Expected Blue - PROBLEM</h2>
    <h2>Expected Blue - Great!</h2>
  </body>
</html>

    Результат:

    enter image description here

    html css css3

    Поделиться Источник AlikElzin-kilaka     28 декабря 2015 в 08:39

    2 Ответа


    4

    Ты говоришь::

    В файле css последний определенный стиль имеет приоритет над предыдущим определенные из них

    Не так быстро… класс с более высокой специфичностью имеет приоритет над порядком, в котором классы появляются в CSS! (spec -обратите внимание, как ‘specificity’ появляется перед «порядок появления» в списке)

    Итак, как бы вы рассчитали специфику вышеуказанных классов?

    Из спецификации w3c :

    Селекторы внутри псевдокласса отрицания подсчитываются, как и любые другие, но само отрицание не считается псевдоклассом.

    Так что специфика селектора .red-with-not:not(.something) =

    /* a=0 b=2 c=0 -> specificity = 020 (two class selectors) */

    Где

    a = # ID селекторы в селекторе,

    b = # селекторы классов, селекторы атрибутов и псевдоклассы в селекторе и

    c = # селекторы типов и псевдоэлементы в селекторе

    Как приложено к другим селекторам .red и .blue -которые имеют спецификацию только 010 (один селектор класса).

    В случае, если вы заинтересованы, специфичность калькулятор является хорошей ссылкой для расчета специфичности.

    Поделиться Danield     28 декабря 2015 в 09:07


    3

    Специфичность для .red-with-not:not(.something) получается ‘0020’, в то время как для .red или .blue получается ‘0010’. Следовательно, приоритет отдается .red-with-not:not(.something) .

    enter image description here

    enter image description here

    Пожалуйста, обратитесь к спецификациям на CSS специфики для более глубокого понимания.

    Поделиться Senjuti Mahapatra     28 декабря 2015 в 08:57


    CSS приоритет селектора

    Почему селектор css select, textarea, input[type=text], input[type=password],input[type=datetime], input[type=datetime-local], input[type=date], input[type=month], input[type=time],…


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

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


    CSS приоритет селектора атрибутов

    Кто-нибудь знает, как я могу добиться того, что второй селектор (.список ресурсов li a[data-type=XXX]) имеет более высокий приоритет, чем первый (.resource-list[data-type=XXX] ли это)? Без…


    CSS идентификатор, начинающийся с некоторой строки, имеющей наивысший приоритет

    Сценарий: У меня есть класс с важным свойством ширины. Я получил некоторые div с динамическим идентификатором, как product1, product2, product3 и так далее.. Проблема: я хочу переопределить свойство…


    CSS селектор не работает

    <div id=gallerywrapper> <img src=ECC1.png> <!—1—> <img src=ECC2.png> <!—2—> </div> CSS: #gallerywrapper img{ border: 2px; } Почему селектор css не применяет…


    Переменная w/ JQuery селектор ломает мой код

    У меня возникла проблема с селектором jQuery в переменной. О, и HTML (background-image:url(‘SOME-IMAGE-URL’)) имеет встроенный стиль, а не в таблице стилей. Я, кажется, не могу сделать этот сценарий…


    CSS, почему мой ID не будет иметь приоритет над моим классом?

    Итак, я узнал, что в CSS селектор идентификаторов имеет приоритет над селектором классов, но по какой-то причине добавление идентификатора к нужному мне абзацу и изменение его положения не окажет на…


    Применять размер шрифта в div и приоритет выбора * тег

    Это может быть немного глупо, но у меня возникли проблемы с размером шрифта текста внутри div. В моем CSS я использовал *{ font-size: 16px; } #newsletter{ font-size: 14px; } Когда я делаю это…


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

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


    Shadow Dom:: content css приоритет селектора?

    У меня есть тень dom элемент, как это: <style> ::content div{ padding-left:130px; } </style> <div class=shadow> foo <content select=div></content> </div> Из…


    Учебник CSS 3. Статья «Каскадность в CSS»

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

    Прежде всего, что такое каскадность? Каскадность – это правила, по которым определяется какие стилевые свойства задаются браузером элементам на странице (последовательность применения стилей к определённым элементам и разрешение при необходимости, возникающих конфликтов).

    Давайте рассмотрим следующее изображение, на нем отображены основные источники информации о стилях, которые образуют каскад:

    Рис. 30 Основные источники информации о стилях.

    К основным источникам информации о стилях относятся:

    • Встроенные стили браузера по умолчанию.
    • Стили, заданные автором документа, их в свою очередь можно указать в трех местах:
      • Внешний CSS файл (с использованием элемента <link>, который размещается внутри элемента <head>).
      • В теле документа (в настоящее время разрешается размещать стили только в начале документа — стили помещаются внутри парного тега <style>, который в свою очередь должен находиться внутри элемента <head>).
      • Внутри элемента (стили, которые задаются с использованием глобального HTML атрибута style).
    • Стили, заданные пользователем (в некоторых современных браузерах возможность определить свои стили для конкретного сайта доступна встроенными средствами в настройках, для других требуется расширение для браузера). Это позволит стилизовать какой-то сайт по своему усмотрению и вкусу, или убрать с него какие-то блоки, которые Вам не хотелось бы видеть.

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

    Главное надо понять, что если на странице применяется несколько стилей к одному элементу, то браузер объединит свойства этих стилей, при условии, что они не конфликтуют между собой (имеют различные значения для однотипных свойств). А если конфликтуют?

    Давайте перейдем к практической части.

    Предположим, что у нас есть абзац (элемент <p>), в котором указана определенная гиперссылка (элемент <a>). HTML код может выглядеть следующим образом:

    <p class = "main"> Для перехода к основной статье нажмите <a href = "#"> вот на это место. </a></p>

    На нашу страницу добавим следующие стили:

    a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
}
.main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}

    Создадим разметку и добавим стили в наш документ:

    <!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Каскадность в CSS</title>
<style>
a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
}
.main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
	<body>
		<p class = "main">Для перехода к основной статье нажмите <a href = "#"> вот на это место. </a></p>
	</body>
</html>

    Результат нашего примера:

    Рис. 30а Каскадность в CSS.

    Давайте рассмотрим какие стили были применены к элементу <a>:

    Рис. 30б Применение стилей к элементу.

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

    Система приоритетов в CSS

    Давайте рассмотрим пример, где не всё так очевидно и однозначно. К примеру, с использованием свойства font-family зададим элементу <a> различный тип шрифта с использованием аналогичных селекторов:

    <!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Конфликты стилей в CSS</title>
<style>
a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
font-family: Arial; /* устанавливаем тип шрифта Arial */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
font-family: Helvetica; /* устанавливаем тип шрифта Helvetica */
}
.main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
font-family: Courier; /* устанавливаем тип шрифта Courier */
}
</style>
</head>
	<body>
		<p class = "main">Для перехода к основной статье нажмите <a href = "#"> вот на это место. </a></p>
	</body>
</html>

    Результат нашего примера:

    Рис. 31 Пример конфликтования стилей.

    Давайте рассмотрим какой шрифт получил элемент <a>:

    Рис. 31a Выбор типа шрифта при конфликте стилей.

    Обратите внимание, что для нашего элемента был установлен шрифт Courier. Как мы видим в «инструментах разрабочика» браузера Chrome этот шрифт выбран из селектора потомков в котором используется как селектор класса, так и селектор типа (.main a), а в остальных селекторах тип шрифта для элемента перечеркнут. Но почему?

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

    • Селектор типа, псевдоэлементы — 1 пункт.
    • Селектор класса, псевдоклассы — 10 пунктов.
    • Id селектор — 100 пунктов.
    • Встроенный (inline) стиль (стиль задается в самом элементе с использованием глобального HTML атрибута style) — 1000 пунктов.

    Давайте перейдем к следующему примеру в котором рассмотрим как работает система приоритетов:

    <!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Работа системы приоритетов в CSS</title>
<style>
#id_invite { /* id селектор — 100 пунктов */
color: red; /* устанавливаем цвет текста красный */
}
.class_invite { /* селектор класса — 10 пунктов */
color: blue; /* устанавливаем цвет текста синий */
}
p { /* селектор типа — 1 пункт */
color: green; /* устанавливаем цвет текста зеленый */
}
</style>
</head>
	<body>
		<!-- устанавливаем цвет текста внутри элемента span зеленый (inline стиль) -->
		<p class = "class_invite" id = "id_invite">Просто <span style = "color: green;">добавь</span> воды.</p>
	</body>
</html>

    В данном примере для элемента <p> был установлен красный цвет текста благодаря id селектору, который имеет более высокое значение в пунтах чем другие селекторы (100). Кроме того, для демонстрации системы приоритетов мы применили встроенный (inline) стиль для элемента <span> и установили для него зеленый цвет шрифта. Обратите внимание, что на изображении, все значения селекторов перечеркнуты, так как встроенный стиль имеет самое высокое значение в пунктах (1000).

    Рис 32 Пример системы приоритетов в CSS.

    Чтобы подсчитать специфичность комбинированных селекторов необходимо их просто сложить между собой, например:

    #id_invite a { /* id селектор (100 пунктов) + селектор типа (1 пункт) = 101 пункт  */
блок объявлений;
}
p:first-letter { /* селектор типа (1 пункт) + псевдоэлемент (1 пункт) = 2 пункта  */
блок объявлений;
}
.main:first-child { /* селектор класса (10 пунктов) + псевдокласс (10 пунктов) = 20 пунктов  */
блок объявлений;
}

    Отмена значимости стилей

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

    В CSS предусмотрена возможность отменить значимость стилей (не учитывать количество пунктов). Для этого необходимо добавить к значению CSS свойства ключевое слово !important.

    Давайте рассмотрим пример использования ключевого слова !important:

    <!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример отмены значимости стилей</title>
<style>
a.rtfm { /* селектор типа (1 пункт) + селектор класса (10 пунков) = 11 пунктов  */
color: green; /* устанавливаем цвет текста зеленый */
}
a { /* селектор типа (1 пункт)  */
color: red !important; /* отменяем значимость стилей и устанавливаем цвет текста красный */
}
</style>
</head>
	<body>
		<a class =  "rtfm"  href =  "http://google.com">Найти</a>
	</body>
</html>

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

    Результат нашего примера:

    Рис. 33 Пример отмены значимости стилей.

    Обратите внимание, что !important указывается в конце каждого свойства и действует только на одно свойство, а не на весь блок объявлений!

    Если вы указали значение !important для двух однотипных свойств различных стилей, то в этом случае браузер рассматривает их по принципу правил значимости (приоритет отдаётся более значимому свойству). Старайтесь избегать подобных ситуаций.

    Сброс и нормализация встроенных стилей.

    Ещё один необходимый метод для грамотного построения кроссбраузерных страниц — это необходимость сброса встроенных в браузер внутренних стилей (сброс стандартных стилей браузера). Другими словами, независимо какой браузер у пользователей, которые посещают Ваш сайт, отображение должно быть в одном стиле — с одинаковыми отступами, границами и форматированием.

    Для этого существуют различные шаблоны, которые сбрасывают внутренние стили (reset.css). Как правило, шаблоны адаптируются под себя (под Ваши нужды) и служат для удаления полей и отступов, устанавливая например 100% размер шрифта, убирая выделения полужирным шрифтом, устанавливают пространство между строками в абзаце, убирают маркеры в списках и тому подобное.

    В настоящее время часто в своей работе используют альтернативу традиционному reset.css (сбросу внутренних стилей), нормализовывая таблицы стилей — normalize.css.

    Данный проект (normalize.css) появился после глубокого исследования различий между изначальными стилями браузера под руководством Николаса Галахера. Основные задачи normalize.css заключаются в том, чтобы сохранить полезные настройки браузера, а не стирать их, и при этом нормализовать стили для широкого круга HTML элементов.

    Как вы понимаете, normalize.css значительно отличается от reset.css. Впоследствии, я Вам рекомендую попробовать в своей работе оба метода, чтобы определиться, соответствует ли конкретный метод вашим предпочтениям в разработке.

    Пример CSS reset — http://meyerweb.com/eric/tools/css/reset/
    Проект normalize css — https://necolas.github.io/normalize.css/

    Вопросы и задачи по теме

    Перед тем как перейти к следующей статье ответьте на следующие вопросы:

    • подсчитайте специфичность комбинированного селектора:
      .main a { 
блок объявлений;
}
      Показать ответ
      .main a { /* селектор класса (10 пунктов) + селектор типа (1 пункт) = 11 пунктов  */
блок объявлений;
}
    • подсчитайте специфичность комбинированного селектора:
      #main #section { 
блок объявлений;
}
      Показать ответ
      #main #section { /* id селектор (100 пунктов) + id селектор (100 пунктов) = 200 пунктов  */
блок объявлений;
}
    • подсчитайте специфичность комбинированного селектора:
      table.header tr:hover { 
блок объявлений;
}
      Показать ответ
      table.header tr:hover { /* селектор типа (1 пункт) + селектор класса (10 пунктов) + селектор типа (1 пункт) + псевдокласс (10 пунктов) = 22 пункта  */
блок объявлений;
}


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

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