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

2020/05/06閱讀時間約 1 分鐘

有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？

A.大於符號(>)

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

.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;}

為什麼會看到廣告

哩老師

現職：精誠資訊恆逸教育訓練中心專任多媒體設計資深講師專長：精通多媒體網頁視覺設計、平面設計與多媒體整合應用、Photoshop影像處理、網站視覺設計、Illustrator向量繪圖、Animate動畫效果設計、Dreamweaver網頁互動效果、Dreamweaver資料庫整合及RWD等。

留言0

查看全部

發表第一個留言支持創作者！