CSS語法中組合符號的用法

E F {description here}

代表著 F 元素被 E 元素包住，不管直接或間接，都套用此規則

ex.

div p {color: red;}

<div>

    <p>123</p>

</div>

<div>

   <span><p>456</p></span>

</div>

這樣123會是紅的，456也是紅的


================================分隔線================================
E>F {description here}
代表F元素被E元素包住，但只能是第一層，才會套用規則

ex.

div>p {color: red;}

<div>

    <p>123</p>

</div>

<div>

   <span><p>456</p></span>

</div>

這樣123會是紅的，但456就不是紅的了

================================分隔線================================

E+F {description here}

代表 E 元素和 F 元素直接相鄰的話， F 元素就套用規則

ex.

span+p {color: blue;}

<span>AAA</span>

<p>BBB</p>

<p>CCC</p>

這樣BBB是藍色，但CCC不是

================================分隔線================================

E~F {description here}

代表 E 元素和 F 元素一般相鄰的話，F元素就套用規則

ex.

span~p {color: blue;}

<span>AAA</span>

<p>BBB</p>

<p>CCC</p>

這樣BBB和CCC都會是藍色