相邻兄弟选择器

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 4 课，共 43 课。

相邻兄弟选择器（+）用于设置紧跟在特定元素后面的元素样式。它们必须有相同的父元素，“相邻”表示“紧挨着彼此”。

例如：

<h2>Heading</h2>
<p>This paragraph is styled</p>

使用这段 CSS：

h2 + p {
  font-weight: bold;
}

这个段落应用了样式，因为它紧跟在 h2 元素后面。

挑战

简单

创建一个 CSS 选择器，仅选中紧跟在描述篮球比赛的 <h2> 元素后面的段落（<p>）。将这些段落的字体颜色设为蓝色，字体大小设为 18px。

亲手试试

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>