CSS
基礎選擇器
- *:通用選擇器(Universal selector)
- 將樣式套用於全部元素
<style type="text/css"> * { margin: 0px; padding: 0px; } </style>
- 將樣式套用於全部元素
- e:元素選擇器(Element type selector)
- 將樣式套用於指定元素
<style type="text/css"> div { color: Red; } p { color: Blue; } </style>
- 將樣式套用於指定元素
- .class:類別選擇器(Class selector)
- 將樣式套用於具指定類別的元素
<style type="text/css"> .Red { color: Red; } </style> <div class="Red"> Red </div> <p class="Red"> Red </p>
- 將樣式套用於具指定類別的元素
- e.class:元素類別選擇器(Class selector)
- 當元素e具指定類別class,則套用樣式
<style type="text/css"> div.Red { color: Red;} </style> <div class="Red"> Red </div> <p class="Red"> Black </p>
- 元素e和.中間不可以有空白字元
- 當元素e具指定類別class,則套用樣式
- #eid:ID選擇器(ID selector)
- 將樣式套用於具指定ID的元素
<style type="text/css"> #Red { color: Red; } </style> <div id="Red"> Red </div>
- 將樣式套用於具指定ID的元素
- e#eid:元素ID選擇器(ID selector)
- 當元素e具指定ID eid,則套用樣式
<style type="text/css"> div#Red { color: Red; } </style> <div id="Red"> Red </div> <p id="Red"> Black </p>
- 註:元素e和#中間不可以有空白字元
- 當元素e具指定ID eid,則套用樣式
- e1, e2 [,e3,...]:群組選擇器(Grouped selector)
- 對e1、e2元素套用相同樣式
<style type="text/css"> div, p { color: Black; } </style> <div>Black</div> <p>Black</p>
- 對e1、e2元素套用相同樣式
- e d:後代選擇器(Descendant selector)
- 若元素為d,且為元素e的子元素或子孫元素,則套用樣式
<style type="text/css"> div span { color: Black; } </style> <div> <span>Black</span> <p> <span>Black</span> </p> </div>
- 若元素為d,且為元素e的子元素或子孫元素,則套用樣式
- e > c:子元素選擇器(Child selector)
- 若元素c為元素e的子元素,則套用樣式
<style type="text/css"> div > span { color: Blue; } </style> <div> <span>Blue</span> <p> <span>Black</span> </p> </div>
- 若元素c為元素e的子元素,則套用樣式
- e1 + e2:相鄰元素選擇器(Adjacent sibling selector)
- 若元素為e2,且前面有e1元素,則套用樣式
<style type="text/css"> div + p { color: Blue; } </style> <div> <p>Black</p> <div>Black</div> <p>Blue</p> </div>
- 若元素為e2,且前面有e1元素,則套用樣式