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

ProgramBox

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

Post author:admin
Запись опубликована:2 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

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

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

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

Когда я писал это, я понял, что самое простое и гибкое решение — определить мои элементы как class=»classname border», а затем обновить класс 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;

1. Я проголосовал за это и пометил как ответ, прежде чем протестировать. Но если inherit — допустимое значение, все это имеет смысл, а я просто неудачник! Спасибо!

2. Это очень допустимо, и обычно это значение по умолчанию.

3. Хорошо, в этом весь фокус. Теперь мое единственное препятствие заключается в том, что все во вложенном стеке должно быть настроено на border-color: inherit, независимо от того, имеет ли оно границу not, или цвет границы по умолчанию равен цвету текста первого ненаследуемого родительского элемента.

4. Мое тестирование показало, что это не значение по умолчанию. Цвет текста является значением по умолчанию. В этом суть моего вопроса, почему он не наследуется по умолчанию?

5. Я обнаружил, что «border: 4px solid inherit;» недопустимо и должно быть указано как «border: 4px solid; 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's inherited border-color */
}

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

Ответ №3:

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

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

1. Это поведение, которое я наблюдаю. Я просто не понимаю, почему inherit не используется по умолчанию. Казалось бы, вы должны иметь возможность устанавливать цвет границы для тела, и он будет распространяться на все дочерние элементы, если они не переопределят его. Это не говорит о том, что границы должны наследоваться. Но если цвет по умолчанию соответствует значению, он должен соответствовать унаследованному значению цвета границы по умолчанию.

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

3. Если бы он наследовался по умолчанию, то вам всегда приходилось бы устанавливать границу дважды. Сначала для цвета, а затем нет для всех его дочерних элементов.

Ответ №4:

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

 .nested {
    border:inherit;
}

Вот в чем проблема:

http://jsfiddle.net/x8mcu/

1. Я подумал, что это выглядит интересно, поэтому я расширил это и обнаружил некоторое неожиданное поведение. Задокументировано здесь, чтобы избавить других от некоторой работы по тестированию. jsfiddle.net/Djspaceg/x8mcu/20 Похоже, что элементы наследуются только от своего непосредственного родителя, а не от прародителя. Чтобы получить прародителя, все родители должны указать, что они тоже наследуют.

Ответ №5:

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

Ответ №6:

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

1. Люди продолжают говорить, что вы должны определить все три элемента границы, чтобы отобразить границу, ширину, стиль и цвет. Факт в том, что цвет по умолчанию будет равен цвету текста. Я думаю, было бы разумнее использовать по умолчанию родительский цвет границы. Я, конечно, не сторонник наследования границ. Но если атрибут границы по умолчанию принимает значение… По умолчанию должно быть родительское значение, а не цвет текста.

Ответ №7:

Следует отметить одну важную вещь о наследовании цвета границы — вы специально не должны указывать ему значение inherit , иначе он не унаследует свойство color элемента, к которому применяется граница — в примере JSFiddle Андре вы увидите, что внутренняя граница поля желтая, но текст зеленый — удалите border-color: inherit , и тогда граница станет зеленой, наследуя свойство color элемента.

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

Ответ №8:

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

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

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

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