Почему граница не распространяется на дочерние элементы?

Я получил сайт, который я создаю, у которого есть глубоко вложенные div, и использует избранные пользователем темы. Мой вопрос: почему граница не распространяется на дочерние элементы?

Я уже имею дело с таблицами стилей DOM, поэтому не будет ничего сложного добавить цикл для обновления границ границ. Тем не менее мне любопытно, почему это стандарт (Firefox и Chrome, в Linux), что цвет границы не наследуется от родителя, а вместо этого по умолчанию соответствует цвету текста, и по-прежнему пограничный стиль не будет по умолчанию твердым?

Есть ли какая-то мудрость за этим поведением? Я не пытаюсь быть cheaky. Мне действительно интересно, почему это кажется "по дизайну".

Как я писал, я понимаю, что самое простое и наиболее гибкое решение - определить мои элементы как class= "classname border", а затем обновить класс границы, чтобы отобразить соответствующий цвет границы.

Тем не менее, я не понимаю, почему?

Вот простой бит html, который демонстрирует проблему...

<html>
  <head>
    <style type="text/css">
      .content{
        color: red;
        display: inline-block;
        border-width: 2px;
        border-style: solid;
        border-color: yellow;
      }
      .nested{
        color: green;
        display: inline-block;
        border-width: 2px;
        border-style: solid;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div class="content">
    Content div. Red text, yellow border.<br>
      <div class="nested">
        Ignores parent border color. Defaults to text color.
      </div>
    </div>
  </body>
</html>

Я бы не стал спрашивать об этом, но я уверен, что здесь есть люди, которые действительно комментировали rfc, и имеют некоторую справочную информацию, которая может пролить свет на "почему".

Спасибо.

Пропустить

Ответ 1

Нет значения по умолчанию для цвета границы. Вам нужно вручную сообщить ему, чтобы взять его значение от своего родителя с помощью border-color: inherit;

Ответ 2

Это старый вопрос, и я шокирован, никто не предложил это решение. Вы можете легко получить унаследованные цвета границ с помощью CSS, если выполните следующие шаги:

1) В файле css создайте следующее правило:

*{
    border-color:inherit;
}

2) Для любого элемента, который вы хотите использовать наследуемый цвет границы, сначала примените свою границу без указанного цвета, затем наследуйте родительский пограничный цвет.

.myThing {
    border:1px solid;     /* this will inherit the parent color as the border-color */
    border-color:inherit; /* this will inherit the parent inherited border-color */
}

Правило css, которое мы упаковали на первом шаге, позаботится обо всех предыдущих элементах border-color: inherit. Затем на втором этапе нам нужно вручную переопределить тот факт, что любая граница, указанная без цвета, наследует родительский цвет NOT border-color. Таким образом, пограничный цвет ДОЛЖЕН прибыть после того, как граница установлена!

Ответ 3

это поведение указано в спецификации w3 для CSS2: Цвет границы

Если цвет рамки элемента не заданное с помощью свойства border, пользователь агенты должны использовать значение элемент "цвет" в качестве вычисленное значение для цвета рамки.

Ответ 4

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

.nested {
    border:inherit;
}

Здесь скрипка:

http://jsfiddle.net/x8mcu/

Ответ 5

Это потому, что вы указываете, что конкретный div (т.е. контент) получает этот конкретный шаблон. Вы можете изменить, как вы это делаете, чтобы указать селектор как div или вы могли бы стекать классы, чтобы это произошло (т.е. class= "content" для первого и class= "контента вложенных" для второго. Это дало бы второй div - стили для содержимого и вложенных.

Ответ 6

Я бы этого не хотел. Граница не является тем, что обычно повторяется в дочерних элементах, или вам придется иметь дело с установкой каждого дочернего элемента на границу: none или border-color: default. Вещи, такие как цвет и стиль шрифта, имеют смысл возвращаться.

Ответ 7

Одна важная вещь, которую нужно отметить о наследовании на границе цвета - вы специально НЕ должны указывать ей наследовать, иначе она не будет наследовать свойство цвета элемента, к которому применяется граница - в примере Andre JSFiddle, вы увидите, что граница внутреннего ящика желтая, но текст зеленый - удалите границу-наследуйте, а затем граница станет зеленой, наследуя свойство цвета элемента.

Это на Firefox 5.0.1/Win, если другое поведение проявляется в других браузерах.

Ответ 8

У меня подобная проблема, и когда я пытаюсь наследовать цвет границы, я вместо этого наследую свойство цвета родителей.

Подход, который сохранил мой день:

.expanded-cell {
    border-style: solid;
    border-width: 3px;
}

.theme-border-color {
    border-color: #f39c11;
}