【CSS】特殊符號：& 、+ ~ > ^

在CSS裡有一種用法叫做『選擇器』，選擇器的種類繁多

最古老又常用的連接設定

1. :link
2. :visited
3. :active
4. :hover

方便的計數設定

1. :first-of-type
2. :last-of-type
3. :nth-child(n)

還有先前介紹的:not(selector)

Class name中含有指定字元字元

1. [class^='icon-'] (eg. class='icon-xxx')  以指定字元為開頭
2. [class$='-icon'] (eg. class='btn xxx-icon') 以指定字元為結尾
3. [class*='icon'] (eg. class='btn xxx-icon-yyy') 指定字元在任何位置(較危險，字元不能太簡單)
4. [class^='icon_'][class$='_b'] (eg . class=’icon_xxxxxxxxx_b’)開頭+結尾

CSS Code

[class*='miao_icon']{ display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url(../Images/miao_icon.png) no-repeat 80px 80px; background-size: 48px;}

[class*='miao_icon_prev'] { background-position: 0px 0px;}

[class*='miao_icon_next'] { background-position: 0px -24px;}

[class*='miao_icon_up'] { background-position: 0px -48px;}

[class*='miao_icon_down'] { background-position: 0px -72px;}

[class*='miao_icon_search'] { background-position: 0px -96px;}

[class*='miao_icon_set'] { background-position: 0px -120px;}

[class*='miao_icon_analy'] { background-position: 0px -144px;}

[class*='miao_icon_customer'] { background-position: 0px -168px;}

特殊符號的選擇器

1. 加號（+）
2. 取代符號（~）
3. 大於（>）

<style>

.test{ width: 100%;}

.test div{ color: #333; font-size: 1.2rem; font-family: Arial, Helvetica, sans-serif,"微軟正黑體"; line-height: 1.15;}

.test01 div+p{ color: #CC0000;}/*选择紧接在<div>之后的所有<p>*/

.test02 div~dfn{ display: block; color: #00ca2c;}/*和<div>平行的每個<dfn>*/

.test03 div>p{ color: #3495b5;}/*<div>直接子層的<P>*/

</style>

<div class="test test01">

<h3>div+p:选择紧接在 div 之后的第一個緊接著的 p</h3>

<p>條件不符，沒有套用樣式</p>

<div><p>條件不符，沒有套用樣式</p></div>

<p>套用了樣式</p>

<p>條件不符，沒有套用樣式</p>

</div>

----------------------------------

<div class="test test02">

<h3>div+dfn:选择紧接在 div 之后的所有的 dfn</h3>

<dfn>~條件不符，沒有套用樣式</dfn>

<div><dfn>~條件不符，沒有套用樣式</dfn></div>

<dfn>套用了樣式</dfn>

<dfn>套用了樣式</dfn>

<div><dfn>~條件不符，沒有套用樣式</dfn></div>

</div>

----------------------------------

<div class="test test03">

<h3>div+dfn:选择紧接在 div 之后的所有的 p</h3>

<p>條件不符，沒有套用樣式</p>

<div><p>套用了樣式</p></div>

<p>條件不符，沒有套用樣式</p>

</div>