Как написать этот CSS более коротким способом? смотри пример

Question

Если это ситуация.

p{margin-bottom:5px}
#top-textContainer p {margin-bottom:10px}

Есть ли способ написать это более коротким способом, или нет другого варианта

#board-committees #top-textContainer p, 
#corporate-governance #top-textContainer p,
#corporate #top-textContainer p,
#about-us #top-textContainer p,
#contact us #top-textContainer p{margin-bottom:15px}

Может кто-нибудь предложить мне более точный заголовок вопроса и улучшить мой вопрос?

Answer 1

Что вы не упомянули в своем первоначальном посте, так это то, что, поскольку вы используете CMS, у вас нет контроля над исходными файлами HTML, только над вашим CSS.

Вам также неясно, какая у вас цель, а именно: из 150 имеющихся у вас страниц вы хотите, чтобы у некоторых из них был абзац с полем в 15 пикселей, а у всех остальных страниц - 10 пикселей.

Ответ при вышеуказанных условиях:

Нет, нет способа сократить код CSS. Без добавления определенных тегов класса в ваш HTML, что вы не можете сделать, нет другого способа отличить страницы, где вы хотите 15px, от страниц, где вы хотите 10px, и того, что вы уже сделали.

Исключения из этого правила:

1. Если страницы, на которых вы хотите использовать другое поле, имеют какую-то другую особенность, которую можно выбрать в CSS, вы можете основывать свой выбор на этом и сокращать код CSS. Например, если за вашим P всегда будет следовать BR , или он будет частью UL . Но поскольку у меня нет вашего источника, я не знаю, возможно ли это.
2. Если ваша CMS предлагает возможность добавить пользовательских тегов класса на страницы или элементы по вашему выбору, вы можете уточнить свой CSS на основе вхождения этого конкретного тега класса. Но так как я не знаю вашу CMS, я также не знаю, возможно ли это.

Answer 2

Установите margin-bottom каждого элемента (p, #top-textContainer и т. Д.), Который вы упомянули, равным 5px? Таким образом, поля накапливаются до нужного вам значения.