How to highlight a paragraph that comes after a heading
Trong hướng dẫn này, bạn có thể tìm hiểu cách làm nổi bật một đoạn văn xuất hiện ngay sau một tiêu đề.
Định kiểu đoạn văn đầu tiên sau tiêu đề
Một mẫu phổ biến là định kiểu đoạn văn đầu tiên trong một bài viết khác với những đoạn văn sau nó. Thông thường đoạn văn đầu tiên này sẽ đến ngay sau một tiêu đề, và nếu đây là trường hợp trong thiết kế của bạn, bạn có thể sử dụng sự kết hợp các phần tử đó để nhắm mục tiêu đoạn văn.
Combinator anh chị em tiếp theo (next-sibling combinator)
CSS có một nhóm CSS Selectors được gọi là combinators, vì chúng chọn các phần tử dựa trên sự kết hợp của các selector. Trong trường hợp của chúng ta, chúng ta sẽ sử dụng next-sibling combinator. Combinator này chọn một phần tử dựa trên việc nó nằm kế bên một phần tử khác. Trong HTML của chúng ta, chúng ta có một h1 theo sau bởi một <p>. <p> là anh chị em tiếp theo của <h1> vì vậy chúng ta có thể chọn nó bằng h1 + p.
<div class="wrapper">
<h1>A heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
.wrapper h1 + p {
font-weight: bold;
font-size: 130%;
color: rebeccapurple;
}