1.2 关系选择器

• element1 element2
• element1>element2
• element1+element2
• :frist-child 和 :last-child
• element1~element2
• :first-of-type 和 :last-of-type
• :only-child
• :only-of-type
• :nth-child(x) 和 :nth-last-child(x)
• :nth-of-type(x) 和 :nth-last-of-type(x)

element1 element2

• elem1 子元素 elem2

form input {
    background-color: yellow;
}

<form>
    <input value="第一层子元素">
    <div>
        <input value="第二层子元素">
    </div>
</form>

element1>element2

• elem1 第一层子元素 elem2

form>input {
    background-color: yellow;
}

<form>
    <input value="第一层子元素">
    <div>
        <input value="第二层子元素">
    </div>
</form>

element1+element2

• elem1 第一兄弟元素 elem2

div+p {
    color: red;
}

<div>
    <p>元素 p</p>
</div>
<p>元素 p</p>
<p>元素 p</p>

:frist-child 和 :last-child

• 作为第一个(最后一个)子元素

p:first-child {
    font-size: 24px;
}
p:last-child {
    background-color: aliceblue;
}

<div>
    <p>第一行</p>
    <p>内容</p>
</div>

element1~element2

• 同一父元素下 elem1 之后的 elem2

h1~p {
    color: red;
}

<p>p1</p>
<h1>h1</h1>
<p>p</p>
<p>p</p>
<div>
    <p>p</p>
</div>
<p>p</p>

:first-of-type 和 :last-of-type

• 指定元素类型作为第一个(最后一个)指定元素类型的子元素

p:first-of-type {
    color: red;
}

p:last-of-type {
    color: orange;
}

<div>
    <h1>h1</h1>
    <p>pppp</p>
    <p>pppp</p>
    <p>pppp</p>
    <h1>h1</h1>
</div>

:only-child

• 作为唯一子元素

p:only-child {
    color: red;
}

<div>
    <p>pppp</p>
</div>

:only-of-type

• 指定元素类型作为该元素类型唯一子元素

p:only-of-type {
    color: orange;
}

<div>
    <h1>h1</h1>
    <p>pppp</p>
</div>

:nth-child(x) 和 :nth-last-child(x)

• 指定元素类型作为第 x 个（倒数第 x 个）

p:nth-child(2) {
    color: red;
}
p:nth-last-child(2) {
    color: orange;
}

<div>
    <h1>h1</h1>
    <p>pppp1</p>
    <p>pppp2</p>
    <p>pppp3</p>
    <p>pppp4</p>
    <p>pppp5</p>
    <p>pppp6</p>
</div>

:nth-of-type(x) 和 :nth-last-of-type(x)

• 指定元素类型作为该元素类型第 x 个（倒数第 x 个）

p:nth-of-type(1) {
    color: red;
}

p:nth-last-of-type(1) {
    color: orange;
}

<div>
    <h1>h1</h1>
    <p>pppp1</p>
    <p>pppp2</p>
    <p>pppp3</p>
    <p>pppp4</p>
    <p>pppp5</p>
    <p>pppp6</p>
</div>