Отменить объявление CSS

Возможно ли иметь правило CSS, которое в основном "отменяет" предыдущее правило?

Пример:

<blockquote>
    some text <em>more text</em> other text
</blockquote>

и скажем, что этот CSS:

blockquote {
    color: red;
}

... но я хочу, чтобы <em> оставался нормальным цветом текста (который вы, возможно, не обязательно знаете).

В принципе, был бы способ сделать что-то вроде этого?

blockquote em {
    color: inherit-from-blockquote's-parent
}

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

This text should be *some unknown colour*
<ul>
    <li>This text should be BLUE
        <ul>
            <li>Same as outside the UL</li>
            <li>Same as outside the UL</li>
        </ul>
    </li>
</ul>

ul {
    color: blue;
}
ul ul {
    color: ???;
}

Ответ 1

Только с помощью CSS вы не можете ссылаться на родительский родитель.

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

<td>
  This is the enclosing element.
  <ul>
    <li>This is the first level UL, direct child of TD
      <ul>
        <li>This is the second level UL</li>
        <li>Same as outside the UL</li>
      </ul>
    </li>
  </ul>
</td>

CSS

td > ul
  color: blue; /* this affects the "direct child" UL only */
}

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

Подробнее о CSS Child Selector и помните, что у старых браузеров могут быть свои причуды с ними.

ИЗМЕНИТЬ

Для Internet Explorer 6 дочерний селектор может быть подделан до некоторой степени. Обязательно закрепите ремни безопасности (условные комментарии и т.п.) Перед использованием:

td ul {
  color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black");
}

Это предполагает "черный" как внешний цвет. Боюсь, если это значение цвета может быть изменено, значит, вам не повезло. Если вы не можете определить expression(), который может получить значение цвета из контекста (например, проверка некоторых других свойств родительских элементов). Или вы сдаетесь и используете JS-инфраструктуру, как уже сказал кто-то другой.

Решение wimpy без использования JS, конечно же, будет:

td ul.first {
  color: blue;
}

Но я могу понять, почему вы хотите этого избежать.

Ответ 2

Используйте это, чтобы удостовериться, что наследование переопределяет все, что могло бы установить цвет:

blockquote em {
    color: inherit !important;
}

Ответ 3

Откажитесь и используйте фрагмент javascript для определения стиля родителя и его установки?:)

Ответ 4

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

Взяв пример blockquote, предположив, что тело является бабушкой и дедушкой:

body, blockquote em {
       color:[whatever];
}


blockquote {
       color:red;
}

И в случае неупорядоченных списков это будет:

body, ul ul {
       color:[whatever];
}


ul {
       color:blue;
}

Ответ 5

Хорошо, дополнительный текст с примером подробно разъясняет вопрос. И я боюсь, что вы не хотите.

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

Итак, вы должны придерживаться громоздкого:

ul {
  color: blue;
}
li ul {
  color: sameenvironment;  /* Sorry but you have to add the specific colour here */
}

Ответ 6

Мой CSS немного ржавый, но это должно работать:

blockquote {
    color: red;
}

blockquote em {
    color: inherit;
}

Вы устанавливаете blockquotes на красный, но все <em>'s, которые содержатся в blockquote, должны наследовать... hmmm, должны ли они наследоваться из окружающего текста или из blockquote?

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

blockquote em {
        color: Purple;
}

Ответ 7

Если вы можете изменить свой html, вы можете попробовать

<li><span>This text should be BLUE</span>
    <ul>
        <li>Same as outside the UL</li>
        <li>Same as outside the UL</li>
    </ul>
</li>

и стиль

li span{
    color: blue;
}

ИЗМЕНИТЬ другой способ выполнить это без дополнительного тега span:

Если мы предположим, что у нас есть класс стиля (или любой другой селектор), который определяет родительский элемент внешней ul. Мы можем изменить css следующим образом:

.parentStyle,
.parentStyle li li{
     color:red;
}
li{
     color:blue;
}

Ответ 8

У меня тоже был этот вопрос, но после того, как я взглянул на другие ответы, он ударил меня,

    body {
        color : initial;
    }

IE не поддерживает это в настоящее время, и Gecko требует -moz-initial, я верю.

    body {
        color : unset;
    }

Этот пока не совсем поддерживается. Я просто подумал, что поделился бы своим ответом на этот вопрос для всех, кто думает об этом.