Цель CSS последний абзац после заголовка

Я искал как изменить последний абзац после заголовка с помощью CSS.

Я думал #div h1 ~ p:last-child сделал бы трюк, но он пропускает мимо второго заголовка и редактирует последний абзац перед списком. Я искал некоторое время и наткнулся на несколько продвинутых сайтов справки css, но они повторяются с наиболее распространенными расширенными селекторами.

HTML:

<h1>Heading</h1>
<p>content</p>
<p>content</p>
<p>content</p>

<h2>Heading</h2>
<p>content</p>
<ul>
      <li>list</li>
      <li>list</li>
</ul>

CSS-код:

#contentContainer > h1 ~ p:last-of-type {
    border-bottom: 1px solid #000;
}
7
css css-selectors html

2 ответов

символ тильды представляет собой селектор общего брата:

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

Это означает, что это может быть после 100 различных тегов (например, h2, h3, div, img и т. д.), и css все равно повлияет на это.

насколько мне известно, нет селектора или комбинации селекторов, которые смогут сделать то, что вы пытаетесь сделать, так как элементы находятся на одном уровне, и CSS не становится настолько продвинутым, как "сделать это, прежде чем он ударит по другому элементу".

Извините, если я ошибаюсь, надеюсь, что я ошибаюсь ради вас.

4

Если вы хотите создать пробел между заголовком и последним абзацем, вы можете использовать

p + h2, p + h3 { 
    padding-top: 20px 
}
0