CSS - размер шрифта для детей с использованием em

Каков наиболее эффективный способ сделать все вложенные элементы списка одинаковыми по размеру при использовании em, который не равен 1. Например, я хочу, чтобы все li в этом списке имели размер 0,85em родителя ul. Должен ли я создавать отдельный класс для каждого "уровня" глубины?

<html>
<head>
    <style type="text/css">
        li
        {
            font-size: 0.85em;
        }
    </style>
</head>
<body>
    <ul>
        <li>Level 1 item
            <ul>
                <li>Level 2 item
                    <ul>
                        <li>Level 3 item</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

Ответ 1

Должен работать.

li li {font-size: 100%;}

Ответ 2

Используйте блок "rem" для выбора размера шрифта. Это устраняет проблему наследования шрифтов.

Джонатан Снук имеет отличную статью об этом.

Ответ 3

Я хочу, чтобы все li в этом списке были отнесены к 0.85em родителя ul

body > ul { font-size: 0.85em; }

сделал бы это

Ответ 4

Моя рекомендация состояла в том, чтобы дать первому <ul> id или классу и установить там font-size.

Ответ 5

(Этот ответ предполагает, что вы хотите, чтобы все li-элементы имели одинаковый размер (вы говорите, что хотите, чтобы один и тот же размер и другой размер в вопросе))

Каскады размера шрифта, поэтому, если вы просто установите его на внешний элемент (скажем, обертки div или что-то еще), все внутри него будет на один шаг меньше, как (я думаю), вы хотите.

<div id="navigation">
    <ul>
        <li>...</li>
        <li>
        <ul><li>...</li><li>...</li></ul>
        </li>
    </ul>
</div>

#navigation { font-size: 0.85em; }

Ответ 6

Я согласен с Эмилем и проголосую за него, если у меня будет достаточно очков rep (n00b здесь). Я бы использовал класс, как он упоминает в своем первом пункте, поэтому его можно использовать повторно в том же документе. Если вы хотите использовать перекрестный браузер и используете текущую спецификацию css, то я не могу предложить лучший пример в реальном мире..... рулон на css 3 и смерть IE6!

Ответ 7

li { font-size: 0.85em; }
li li { font-size: 1em; }