3.4 Selectors - 符號
以此段 html 為例,來瞭解當使用不同符號時,哪些文字會變紅色:
<p>段落一</p>
<div>
<p>段落二</p>
<section>
<p>段落三</p>
</section>
</div>
<p>段落四</p>
<p>段落五</p>
<a href="#">連結文字</a>
逗號(,)
div, p{
color: red;
}
<div> 及 <p> 都會套用相同樣式。
除了連結文字之外,其它文字都會變紅色。
空格:內層全部
<div> 內層的所有 <p> 才會套用到樣式。
段落二和段落三都會變成紅色。
大於符號(>):第一層子元素
div > p{
color: red;
}
<div> 內層的第一層子元素 <p> 才會套用到樣式。
只有段落二會變成紅色。
加號(+):下個相鄰元素
div + p {
color: red;
}
只有段落四會變紅色。
星號(*):所有元素
全部文字都會變成紅色。
波浪號(~)
波浪符號則是影響到下一個同階層的所有匹配到的元素
div ~ p {
color: red;
}
只有段落四和段落五,會變紅色。