CSS的大於、加號、取代符號

有時我們會在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;}

雖然只是CSS撰寫上的小技巧，但是若能夠善加使用這些符號的話，將可以很好地規避每個CSS之間的影響，想必將更有利於撰寫CSS和減少class的數量唷！