CSS三种基本选择器
程序员文章站
2022-04-28 08:13:52
...
三种基本选择器的优先级： id > class > 标签
-
标签选择器
-
选择一类标签
-
标签{} -
<style> h1{ color: green; } </style>
-
-
类 选择器：
-
选择所有class属性一致的标签，跨标签
-
.class名称{} -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 类选择器格式 .class文件名称{} 好处：可以多个标签归类，是同一个class */ .one{ color: red; } .two{ color: green; } .three{ color: yellow; } </style> </head> <body> <h1 class="one">标题一</h1> <h1 class="two">标题二</h1> <h1 class="three">标题三</h1> </body> </html>
-
-
id 选择器：
-
全局唯一
-
#id名{} -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* id选择器 :id必须保证全局唯一 #id名称{} 优先级：id > class > 标签 */ #one{ color: yellow; } #two{ color: green; } #three{ color: red; } </style> </head> <body> <h1 id="one">标题一</h1> <h1 id="two">标题二</h1> <h1 id="three">标题三</h1> </body> </html>
-