CSS的大於(>)、加號(+)、取代符號(~)

Anderson

有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？各有甚麼不同呢？以下讓我們來簡單介紹一下。

大於符號(>)

大於(>)就是選取底下直接的子元素。

以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：

 

CSS

使用空格的情況

.box p{ font-size:20px; color:#216AAD;}

 

使用大於符號的情況下

.box > p{font-size:20px; color: #216AAD; }

由上可知.box p會影響到box這個div底下所有的p元素，而因為「>」只會影響到直接的子元素，所以例子中box底下直接接觸到的p元素只有001跟004，所以只有這兩者會改變。

 

加號符號(+)則是會影響到後方同層級的第一個元素

範例：

html

 

CSS

div + p{ font-size:20px; color:#216AAD;}

由於跟div同層級又直接位於div後方的只有003，所以只有003改變。

 

而取代符號(~)是影響到後方同層級的全部元素，因此除了003以外004也會改變。

div ~ p{ font-size:20px; color:#216AAD;}