2015年7月25日 星期六

CSS 選擇器中加號(+)和取代符號/波浪號(~)的意思

在前幾天的文章中,我們談到CSS裡面常常會有一些特殊符號,今天我們來看一下加號(+)和取代符號(~)在CSS中的用處吧!

記得在上一篇文章(CSS中的大於(>)是什麼意思?),我們談到大於符號( > )指的是直接的小孩的意思 (direct descendant/child),而加號和取代符號(~)則是用在他們的兄弟姊妹(siblings),也就是用在同一階層的情況下。

CSS中的加號(+)


讓我們先來看一下加號,加號影響的是同一階層(siblings)的標籤,例如,div + p指的是直接影響到div後的p,而div和p是屬於同一層的。

為了方便大家理解,我們直接來看一下範例吧!

我們的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>
原本的文件長這樣子:
接著,我在STYLE的地方,加入如下的CSS
div + p{
            font-size:50px;
        }
這時候有哪些字體會變大呢?結果如下:
我們可以看到Three和Six都變大了,之所以Three和Six會變大,是因為CSS是選擇div + p,所以所有在同一階層(siblings)的情況下,如果是div接著碰到的p,都會受到影響。

CSS中的取代符號(~)


那麼取代符號(~)呢?(註:我查了一下google才知道這個符號叫做取代符號)。

取代符號其實和加號用法很類似,只是加號只會影響到下一個同階層的元素,但是取代符合則是影響到下一個同階層的所有元素。用中文說實在非常難解釋...,還是讓我們看一下例子。

我們用一樣的HTML結構,只是現在把CSS換成如下:
div ~ p{
            font-size:50px;
        }
這時候的結果會長這樣子:
這時候連Seven也跟著變大了,Seven之以跟著變大是因為seven同樣是在div之後的p(碰到的第二個p),在上面加號的例子中,div + p只會影響到div之後的第一個p,不會影響到後續的p,但如果使用的是div~p,則div後面的p都能夠有影響

總結來說,
p+p:同一層中,p後面的第一個p;
p~p:同一層中,p後面的所有p。

CSS-Tricks中的這張圖, 清楚的呈現了+和~兩者的差異:


Share:

0 意見:

張貼留言