Как увеличить вес CSS?

Как рассчитать вес?

Правила расчета: Вес определяется четырьмя значениями (A, B, C, D).Значения этих четырех значений следующие:

1.  A = 1 , если встречается встроенный стиль , A = 0 в противном случае.
2. Значение B равно количеству вхождений селектора идентификатора.
3. Значение C равно количеству вхождений селекторов классов, селекторов атрибутов и псевдоклассов.
4. Значение D равно количеству раз появления селектора тегов и псевдоэлемента .

Найдите значения A, B, C и D по приведенным выше правилам, например:

     #nav-global > ul > li > a.nav-link:hover

1. Поскольку встроенных стилей нет, A=0.
2. Селектор идентификатора появляется один раз, B=1.

3. Селектор класса появляется один раз, селектор атрибута появляется 0 раз, селектор псевдокласса появляется один раз, C=2

4. Селектор тегов появляется 3 раза, D=3.

Найденное значение можно упростить до (0, 1, 2, 3).

Как сравнить веса?

Сравнивайте слева направо по рассчитанным значениям веса (A, B, C, D), и выигрывает больший; если четыре равны, будет соблюдаться принцип приоритета более позднего .

Например:

#nav-list .item {     color: #f00; } .nav-list .item {     цвет: #0f0 }

#nav-list .item имеет приоритет (0, 1, 1, 0)
.nav-list .item имеет приоритет (0, 0, 2, 0)

Все значения A равны 0, а значение B, равное 1, больше 0, поэтому #nav-list .item должен быть больше, чем .nav-list .item, а цвет шрифта будет #f00.

Как увеличить вес?

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

1. На основе структуры DOM страницы напишите селектор с таким же весом. Недостатки: Сложно поддерживать.Если структура DOM изменится, необходимо изменить переопределенный стиль.

Пример:

• <div class="box1">
      <div class="box2">
          <div class="box3">文字</div>
      </div>
  </div>
   
  // 原有样式
  .box1 .box2 .box3 {color: blue}
   
  // 覆盖样式（ps:这么写可以覆盖，但是DOM结构发生更改，CSS结构可能也需要更改）
  .box1 .box2 .box3 {color: red}

2. Используйте более глубокие уровни. Недостатки: Увеличение структуры DOM с целью увеличения веса — явно не оптимальное решение, не говоря уже о том, что нельзя изменить стиль многих компонентов.

3. Используйте переопределение селектора идентификатора. Недостаток: это сделает вес стиля слишком большим. Если вы захотите переопределить его позже, вы можете использовать только !important.

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

Так как же лучше увеличить вес?

.box3.box3.box3 {цвет: красный}

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