CSS переопределяет элементы a с b

Question

в моем CSS у меня есть

.footer a {color :red}
.footer b {color :green}

в коде: <b><a> ... </a></b> .... <a>..</a>

Показывает все красным цветом. Я хочу указать разные цвета и <a>..</a>, но <a> переопределяет <b> .. Как мне продолжить?

Answer 1

<b><a> ... </a></b> .... <a>..</a>

Другими словами, жирный тег содержит тег. Текст в теге, согласно CSS, красный. Это переопределяет стиль для тега b.

Попробуйте этот CSS:

.footer a {color :red}
.footer b a {color :green} /* Apply rules to a tags within bold tags */

С другой стороны, вы говорите, что все зеленое, когда я ожидал, что все будет красным. Это говорит об ошибке HTML. Запустите HTML через W3C Validator.

Answer 2

.footer b {color :green}
.footer a {color :red}

Если вы объявите, как указано выше, второе определение заменит первое.

---

Примечание: Однако, если вы хотите, чтобы находились внутри (дочерние элементы) , тогда вам следует использовать

.footer b a {color :red}

Answer 3

Элемент a будет красным, если вы не украсите его по-другому. Так как у него есть стиль, он не собирается inherit.

.footer a {color :red}
.footer b,
.footer b a {color :green}

Answer 4

Обратите внимание, что .footer a по существу означает «Все элементы привязки в элементе с классом нижнего колонтитула», тогда как .footer b означает «Все полужирные элементы в элементе с классом нижнего колонтитула». Если ваш HTML выглядит примерно так:

<div class="footer">
<b>Lorem Ipsum Dolor</b>
</div>

Было бы понятно, что он становится зеленым.

Answer 5

Кроме того, используйте Firebug для отладки того, что происходит с вашим CSS. Это бесплатно, легко установить и очень полезно:

http://getfirebug.com/

Answer 6

Попробуйте это:

.footer b,
.footer b * {
    color: green
}

Селектор .footer b * дополнительно выбирает все элементы-потомки b.