Home / Questions / 54825
Accepted
toledano
Asked: 2020-03-13 10:17:54 +0800 CST 2020-03-13 10:17:54 +0800 CST

Переопределить значение свойства CSS

  • 772

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

У меня есть файл А, который я не могу редактировать .

.menu a {
  padding: 20x;
}

Итак, теперь я создаю еще одну таблицу стилей, но если я поставлю

.menu a {
  padding: 0;
}

Это выглядит не так, как я хочу. Один из вариантов - поставить другое значение, например padding: 5px;, но я ищу альтернативу. Когда я снимаю флажок с этого свойства в инспекторе Safari, все выглядит так, как я и ожидал.

Пример:

.caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}


/* solo cambiar las líneas de abajo */
/* no vale padding: 40px; */
.caja {

}
<div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

Как я могу отключить свойство paddingиз другой таблицы стилей?

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

css3

5 Answers

  1. Если при снятии флажка вы видите его таким, как хотите, вы, вероятно, наследуете свойство так, как хотите, от предка. При использовании padding: inheritвы обязательно получите желаемый стиль.

    • 3

  2. Если вы хотите переопределить стиль, то есть получить значение по умолчанию для этого конкретного стиля, в этом случае padding, который был ранее изменен (так же, как снятие отметки со стиля в инспекторе Google Chrome), вы должны использовать значение initial.

    Ваш модифицированный пример:

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

.caja {
  padding: initial;
}
    <div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

    • 3

  3. Если вы используете importantего, ваша проблема со стилями будет решена.

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}


/* solo cambiar las líneas de abajo */
/* no vale padding: 40px; */
.caja {
      padding: 40px !important;
}
    <div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

    • 1
  4. Best Answer

    Поскольку он у вас поднят, вы не можете сбросить его, так как он был ранее назначенpadding: 20px;

    Единственный способ - поставить padding: 40px;снова:

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

.caja {
  padding: 40px; // Nuevo valor asignado
}

    Вот как работают CSSкаскадные таблицы стилей .

    • 1

  5. Есть и другой способ сделать это, если у вас есть доступ к HTML.

    В html вы назначаете свойство idэлементу, здесь я его назвал nueva-caja:

    <div class="caja" id="nueva-caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene <code>class="caja" id="nueva-caja"</code>
</div>

    Затем в CSS:

    #nueva-caja {
  background-color: blue;
  padding: 40px;
}

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

    Если вы поместите приведенный выше код в начало CSS, он также будет работать, я проверял :)

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

#nueva-caja {
  background-color: blue;
  padding: 40px;
}
    Con id:
<div class="caja" id="nueva-caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene <code>class="caja" id="nueva-caja"</code>
</div>

<hr />
Sin id:
<div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene solamente <code>class="caja"</code>
</div>

    • 1