Подтвердить что ты не робот

Могу ли я reset свойство CSS, а не переопределять его?

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

address:not(:last-child), 
fieldset:not(:last-child), 
li:not(:last-child), 
ol:not(:last-child), 
p:not(:last-child), 
table:not(:last-child), 
ul:not(:last-child) {margin-bottom: 12px}

Это применяет 12px margin-bottom для тегов <p class="mainCopy">, которые меня не интересуют. Я хочу, чтобы иметь возможность переопределить его с помощью .mainCopy {margin-bottom: 0}, но, очевидно, базовое правило более специфично, чем мое правило, Это заставляет меня сделать правило более конкретным, чем я хочу или нуждаюсь, например p.mainCopy. Более того, мне иногда нужно иметь <li class="mainCopy">, и это заставило бы меня добавить второе правило для обслуживания <li>.

Есть ли способ, которым я могу просто reset это свойство, или вернуться к проблемному объявлению CSS?

4b9b3361

ОТВЕТЫ

Ответ 1

Чтобы ответить на ваш вопрос (а не решить вашу проблему)...

Могу ли я reset свойство CSS вместо его переопределения?

Reset к чему?

C в CSS означает каскадирование, и вы всегда будете иметь несколько уровней стилей, объединяющих между собой с четко определенными, хотя и не всегда четко понятными правилами. Помимо стилей, заданных автором сайта в разных местах (внешние файлы CSS, <style> blocks, style="" attributes...), в базовой строке мы найдем встроенные стили браузера и насколько я знаю браузер поставщики могут свободно назначать любые стили по умолчанию, которые они выбирают, - и часто пользователи могут добавлять свои собственные стили в суп, со встроенными настройками или с надстройками. Даже так называемый сбрасывает CSS на самом деле не reset ничего. Они просто добавляют еще один слой стилей поверх остальных.

Нет синтаксиса для "Создать снимок здесь" (это было бы единственное решение, о котором я могу думать без тщательного анализа), поэтому ответ в основном нет.

Ответ 2

Так как address:not(:last-child) и аналогичные символы имеют 11 точки специфичности, вы можете дублировать имя класса, чтобы сделать его более сильным. Например, следующая декларация полностью действительна и имеет 20 точки специфичности:

.mainCopy.mainCopy {
     margin-bottom: 0;
}

И вы должны добавить только один mainCopy в свой html:

<ul class="mainCopy">

Изменить

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

 address:not(:last-child) /* is 0-0-1-1 specificity (1 tagname, 1 pseudoclass) */
 .mainCopy.mainCopy /* is 0-0-2-0 specificity (2 classnames) */

Ответ 3

Существует следующее свойство:

all: unset;

Который, я считаю, можно использовать так:

.mainCopy {
    all: unset;
    margin-bottom: 0
}

https://developer.mozilla.org/en/docs/Web/CSS/unset

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

Ответ 4

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

address:not(:last-child):not(.mainCopy), 
fieldset:not(:last-child):not(.mainCopy), 
li:not(:last-child):not(.mainCopy), 
ol:not(:last-child):not(.mainCopy), 
p:not(:last-child):not(.mainCopy), 
table:not(:last-child):not(.mainCopy), 
ul:not(:last-child):not(.mainCopy) {
  margin-bottom: 12px
}

Ответ 5

Используйте универсальный селектор *, которому предшествует тег body.

body *.[<'className'>] {}

Или просто предварите свой класс тегом body.

body .[<'className'>] {}

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

address:not(:last-child),
fieldset:not(:last-child),
li:not(:last-child),
ol:not(:last-child),
p:not(:last-child),
table:not(:last-child),
ul:not(:last-child) {
  margin-bottom: 12px;
  color: red;
}
body *.mainCopy {
  margin-bottom: 0;
  color: green;
}
<main>
  <p class="mainCopy">p</p>
  <p>p</p>
  <ul>
    <li class="mainCopy">
      li
    </li>
    <li>
      li
    </li>
  </ul>
  <code>body *.mainCopy {}</code>
</main>

Ответ 6

Я имею тенденцию идти с начальным как значение свойства.

address:not(:last-child), 
fieldset:not(:last-child), 
li:not(:last-child), 
ol:not(:last-child), 
p:not(:last-child), 
table:not(:last-child), 
ul:not(:last-child) {margin-bottom: initial}