CSS не переопределяет унаследованные значения - PullRequest
Новая
       7

CSS не переопределяет унаследованные значения

5 голосов
/ 12 января 2012

У меня есть Html, который содержит что-то вроде: (Несколько div в пределах div A). 

<div class="a">
    <div class="b"></div>
</div>

Мой CSS выглядит так: 

.a div {
    border: solid;
    border-width: thin;
}

.b {
    border: none;
    border-width: 0px;
    border-collapse: collapse;
}

По какой-то причине значения b будутне отменять.однако, если я просто напишу вместо ".div", я не получу ожидаемого поведения для других div внутри a.

Единственный способ, которым я заставил это работать, - это использовать "важный!"(то есть "граница: нет! важно";), но это кажется менее элегантным.

любил бы любые идеи относительно того, что там происходит ..

Эхуд.

Ответы [ 3 ]

3 голосов
/ 12 января 2012

Ваши селекторы ошибочны.

Вместо 

a. div {

запись 

div.a {

(выберите любой div с классом "a")

Вместо 

b {

(который на самом деле попытается стилизовать все элементы b )

Использование 

.b {

(который говорит, выберите что-нибудь, что определено классом "b")

РЕДАКТИРОВАТЬ (в ответ на ответ)

Чтобы выбрать все div, которые находятся внутри div с классом «a», используйте следующий селектор: - 

div.a div
1 голос
/ 12 января 2012

.a div имеет более высокую специфичность, чем .b.
Если вы хотите, чтобы css для .b переопределял .a, придайте ему более высокую специфичность, например .a div.b.

(Или вы можете использовать !important, да, но это здесь не рекомендуется.)

0 голосов
/ 05 апреля 2017

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

Оценка обычно рассчитывается в следующем порядке: 

inline   id-element   class-element   no.-of-elements
  $          $             $                $

($) -> 1, если в коде существует соответствующий тип специфичности
($) -> 0, если в коде нет соответствующего типа специфичности

Таким образом, здесь
для .a div счет будет 0012
для .b счет будет 0011
Очевидно, что первый выигрывает, поэтому он может изменить содержимое, даже если .b пытается переопределить .a div

(ИЛИ)

вы можете использовать !important в объявлении, чтобы завершить это объявление

...