CSS選擇符-----元素選擇符
阿新 • • 發佈：2018-12-10
通配選擇符（*）
選定所有物件
- 通配選擇符(Universal Selector)
- 通常不建議使用通配選擇符，因為它會遍歷並命中文件中所有的元素，出於效能考慮，需酌情使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ color: #FF0000; font-weight: bold; } </style> </head> <body> <div> <p>第一個段落。</p> <p>第二個段落。</p> <ul> <li>Java</li> <li>C#</li> </ul> </div> </body> </html>
型別選擇符（Element）
以文件語言物件型別作為選擇符
- 型別選擇符(Type Selector)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color: #FF0000; font-weight: bold; } </style> </head> <body> <div> <p>第一個段落。</p> <p>第二個段落。</p> <ul> <li>Java</li> <li>C#</li> </ul> </div> </body> </html>
ID選擇符（Element#ID）
以唯一識別符號id屬性等於myid的E物件作為選擇符
- ID選擇符(ID Selector)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #language{ color: #FF0000; font-weight: bold; } </style> </head> <body> <div> <p>第一個段落。</p> <p>第二個段落。</p> <ul id="language"> <li>Java</li> <li>C#</li> </ul> </div> </body> </html>
類選擇符（Element.class）
以class屬性包含myclass的E物件作為選擇符
- 類選擇符(Class Selector)
- 不同於ID選擇符的唯一性，類選擇符可以同時定義多個
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a{ color: #0000FF; } .b{ font-weight:bold; font-size: x-large; } </style> </head> <body> <div> <p>第一個段落。</p> <p>第二個段落。</p> <ul class="a b"> <li>Java</li> <li>C#</li> </ul> </div> </body> </html>