css选择器
-
选择器的格式
<!-- 属性 值 属性 值 --> <!-- h1 {color:red; font-size:14px;} --> <!-- 选择器 声明 声明 -->
-
选择器种类
1.直接根据元素种类选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 根据元素名称选择元素 */ body { background-color: coral; } p { color: red; text-align: left; } </style> </head> <body> <p>The left</p> </body> </html>
2.根据元素id选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 根据元素id */ #Zwan { color: aqua; text-align: center; } </style> </head> <body> <p id="Zwan">Zwanan</p> </body> </html>
3.类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 类选择器 ,类名不能以数字开头*/ .TheClassSel { color: blue; text-align: center; } /* 可以引用多个类 */ .one { color:brown; } .two { font-size: xx-large; color: aliceblue; text-align: center; } .d1 { width: 100px; height: 100px; background-color: antiquewhite; } </style> </head> <body> <h1 class="TheClassSel">标题一</h1> <h2 class="one">标题二</h2> <h3 class="one two">标题三</h3> <h4 class="one">标题四</h4> <h5 class="one two">标题五</h5> <div class="d1">方格</div> </body> </html>
4.通配符选择器,直接选中所有
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { color: blue; text-align: center; } /* 通配符选择器* */ /* *{}选中所有 */ </style> </head> <body> <p id="Zwan">Zwanan</p> <p>The left</p> <h1 class="TheClassSel">标题一</h1> <h2 class="one">标题二</h2> <h3 class="one two">标题三</h3> <h4 class="one">标题四</h4> <h5 class="one two">标题五</h5> <div class="d1">方格</div> </body> </html>
-
注释
id与class的区别:
1.id在文档中只能使用一次,而class可以多次使用 2.id比class具有更高的样式优先级 3.一个元素只能有一个id属性值,却可以拥有多个class属性值