Как запретить WebKit рекурсивно уменьшать размер шрифта? - PullRequest
Новая
       80

Как запретить WebKit рекурсивно уменьшать размер шрифта?

0 голосов
/ 06 августа 2020

Я использую WebKit , и я пытаюсь уменьшить размер шрифта в одном элементе и во всем его содержимом. Вот пример элемента: 

<div id="element">
<div>The element has a sub-element with <i>italic</i>, <strong>strong</strong> and other tags.</div>
</div>

Этот CSS вообще не уменьшает шрифт: 

#element {
    font-size: smaller;
}

Если я выберу только внутренний <div>, размер шрифта не уменьшается в <i> и <strong>: 

#element div {
    font-size: smaller;
}

Я не могу выбрать каждый тег по отдельности, потому что я не знаю всех возможных вложенных тегов. Последний шанс - использовать звездочку: 

#element * {
    font-size: smaller;
}

Но этот CSS работает еще хуже: он рекурсивно уменьшает размер каждого вложенного тега.

Такое поведение очень неожиданно и не может воспроизводиться в Chrome. Это ошибка WebKit? Можно ли отключить "функцию" рекурсивного уменьшения размера шрифта?

Ответы [ 2 ]

0 голосов
/ 06 августа 2020

Мои селекторы элементов #element и #element div работают должным образом. То есть уменьшаются все элементы внутри. Попробуйте запустить фрагмент кода, который я написал ниже, если все работает как надо, то, скорее всего, у вас другой размер шрифта, указанный где-то еще в коде. Если в сниппете он не уменьшается, значит, проблема в браузере. Напишите в комментарии, если возникнут трудности, я готов помочь вам разобраться. 

#element {
    font-size: smaller;
}

#element2 div {
    font-size: smaller;
}
<div id="element"><div>If you accept font-size smaller to id #element then everything is reduced as needed including <i>italic</i> and <strong>strong</strong></div></div>

<div id="element2"><div>If you accept font-size smaller to div inside #element2 then everything is reduced as needed also including <i>italic</i> and <strong>strong</strong></div></div>
0 голосов
/ 06 августа 2020

Вы можете использовать > * селектор 

#element > * {
    font-size: smaller;
}

Это выберет каждый тег, который является прямым дочерним элементом #element, но не go на более глубокий уровень.

Селектор, который вы написали - #element * - применяет стили к каждому элементу внутри #element, независимо от того, является ли он прямым дочерним элементом или очень вложенным элементом. Итак, в вашем примере это происходит: <div> имеет меньший размер шрифта, чем #element, <i> имеет меньший размер шрифта, чем <div> (так что теперь он вдвое меньше, чем #element) и т. Д.

Подробнее о селекторах можно прочитать здесь .

...