CSS selector 符號

element {
  css declarations;
}

以下為本文Html範例

<div>
    <p>One</p>
    <div>Two</div>
    <p>Three</p>
</div>

<div>
    <div>Four</div>
    <div><p>Five</p></div>
    <p>Six</p>
    <p>Seven</p>
</div>

(>) 大於符號

套用A元素下所有第一層B元素

A > B {
css declarations;
}

/* css範例-基本使用*/
div > p {
  font-size:50px;
}

(+) 加號

套用A元素後第二個開始連續的B元素， 如中間有其他元素， 則會從下個B元素的第二個開始

A + B {
css declarations;
}

/* css範例-基本使用*/
div + p {
  font-size:50px;
}

(~) 取代符號

套用A元素後第二個開始連續的B元素，不受其他元素影響

A ~ B{
css declarations;
}

/* css範例-基本使用*/
div ~ p {
  font-size:50px;
}