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

Question

Это довольно просто, поэтому я уверен, что я просто пропустил что-то очевидное.

Скажем, у меня есть этот пример кода:

<main> 
    <header>Header</header> 
    <section> 
     Content 
    </section> 
    <section> 
     Content 
    </section> 
    <section> 
     Content 
    </section> 
</main> 

И первоначальный CSS из:

main{text-align:center;} 
section{display:inline-block;width:33%;} 

Поэтому у меня есть три колонки занимают более или менее трети страницы каждого. Теперь, из-за того, как написан код, на странице будет пустое пространство. Мой предпочтительный метод борьбы с этим - установить *{font-size:small}, а затем добавить body>main{font-size:0;}.

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

Я думаю, что я просто неправильно понял, что делает селектор >, но то, что я пытаюсь найти, - это селектор, который стилирует элемент, не применяя указанный стиль к элементам children. В этом случае я хочу создать свой основной элемент, но я не хочу, чтобы стиль влиял на элементы заголовка или раздела.

Каков правильный способ сделать это?

И прежде, чем кто-либо предложит это, нет, я не хочу использовать другие методы для удаления пробелов (комментарии HTML, перемещение заключительной части закрывающего тега на следующую строку и т. Д.), Поскольку они выглядят уродливыми и я предпочитаю, чтобы мой код выглядел как презентабельный как моя страница.

Answer 1

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

Проблема заключается в том, что размер шрифта является одним из свойств, которые наследуются от его родителя, а значения типа «маленький» не устанавливают абсолютные размеры, а относятся к унаследованному размеру. так что я бы попытаться сбросить правильный размер после вашего основного слоя, используя абсолютное значение вместо относительного одного

body>main>*{font-size:18px;} 

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

надеюсь, что это вам поможет; bw