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

Question

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

Пример:

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

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

blockquote {
    color: red;
}

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

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

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

---

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

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: ???;
}

Answer 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 и помните, что у старых браузеров могут быть свои причуды.

---

EDIT

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

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

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

Самое слабое решение без использования JS, конечно, будет:

td ul.first {
  color: blue;
}

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

Answer 2

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

blockquote em {
    color: inherit !important;
}

Answer 3

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

Answer 4

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

Возьмем пример блочной цитаты, предположив, что тело является прародителем:

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


blockquote {
       color:red;
}

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

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


ul {
       color:blue;
}

Answer 5

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

    body {
        color : initial;
    }

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

    body {
        color : unset;
    }

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

Answer 6

Если вы можете изменить свой 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;
}

EDIT другой способ сделать это без дополнительного тега span:

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

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

Answer 7

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

blockquote {
    color: red;
}

blockquote em {
    color: inherit;
}

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

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

blockquote em {
        color: Purple;
} 

Answer 8

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

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

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

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