CSS选择符—–元素选择符 -云博客

CSS选择符—–元素选择符

# 前端 2024-05-05 14:59 0 35 来源：云博客

**通配选择符（*）**

选定所有对象

通配选择符(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>