Запутанный порядок классов / стилей CSS - PullRequest
Новая
       5

Запутанный порядок классов / стилей CSS

0 голосов
/ 06 ноября 2018

Может кто-нибудь объяснить мне, почему мой порядок имен классов CSS не соблюдается? Несмотря на то, что .x14 / .x15 являются стилями непосредственно в HTML, они по-прежнему являются именами классов?

enter image description here enter image description here

Приветствия

1 Ответ

0 голосов
/ 06 ноября 2018

CSS Работает на основе специфики и порядка объявлений, в вашем случае .x14 и .x15 представляются встроенными стилями и имеют приоритет элементов класса в архиве стилей, поэтому Встроенный стиль> стиль файла

Здесь следует список специфики и его порядок от низшего приоритета до высшего приоритета

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

*{
   background: red;
 }

Этот атрибут для всех элементов на странице теперь будет иметь красный фон

Выбор класса 

.foo{
  background: green;
}

Для элемента с классом foo будет установлен зеленый фон

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

a[target="_blank"]{
  color: blue;
}

Это будет соответствовать только a элементам с target = "_ blank"

Псевдо-классы 

div:hover{
  background: yellow;
}

Это установит желтый фон в каждом делении, когда наведет указатель мыши на this

Селекторы идентификаторов 

#foo{
  background: pink;
}

Это установит розовый фон только для одного элемента, у которого установлен идентификатор foo (идентификатор уникален)

Встроенный стиль 

<style>
  .foo{
    background: purple;
  }
</style>

В качестве встроенного стиля он переопределит класс .foo, установленный в файле css, и изменит зеленый фон на фиолетовый фон

И у css есть еще две другие особенности, которые должны быть переопределены

Важное свойство 

.foo{
   background: gray !important;
}

Это переопределит весь стиль фона, установленный в предыдущем классе .foo

Не псевдоэлемент 

h1:not(.foo){
  font-size: 1rem;
}

будет установлено для всех h1 минус те, которые имеют класс foo

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

...