选择器是一个选择标签的过程
- 标签选择器 标签{属性: 值; 属性:值;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> /*样式表内容 */ div{ font-size: 50px; color: orange; background-color: rgb(0, 1, 0); width: 300px; height: 200px; } p{ font-size: 20px; color: #00ffff; } </style> </head> <body> <div>AAAAA</div> <div>BBBBB</div> <p>CCCCC</p> <p>DDDDD</p> <div>AAAAA</div> </body> </html>
- 类选择器 .自定义类名{属性: 值; 属性: 值}
- 特点: 谁调用, 谁生效
- 一个标签只可以调用多个类选择器
- 多个标签可以调用同一个类选择器
- 类选择器的命名规则
- 不能使用数字开头
- 不能使用特殊符号或者特殊符号开头( _ 除外 ) 来定义类名
- 不建议使用汉字来命名.
- 不建议使用属性或者属性的值来定义类名
- 特点: 谁调用, 谁生效
<!DOCTYPE html> <html> <head> <title>Doucment</title> <meta charset="utf-8"> <style type="text/css"> .box{ font-size: 40px; color: #ff0000; background-color: rgb(255, 222, 111); width: 400px; height: 200px; } .miss{ text-indent: 2em; text-align: right; } .G{ font-size: 200px; color: blue; } .o1{ font-size: 200px; color: #990000; } .o2{ font-size: 200px; color: orange; } .g{ font-size: 200px; color: blue; } .l{ font-size: 200px; color: #009900; } .e{ font-size: 200px; color: orange; } </style> </head> <body> <div class="box miss">AAAAA</div> <div>BBBBB</div> <p class="box">CCCCC</p> <p>DDDDD</p> <span class="box">EEEEE</span> <br> <br> <br> <span class="G">G</span> <span class="o1">o</span> <span class="o2">o</span> <span class="g">g</span> <span class="l">l</span> <span class="e">e</span> </body> </html>
- ID 选择器 #自定义名称{属性: 值; 属性: 值}
- 特点
- 一个 ID 选择器在一个页面只能使用一次, 如果使用 2 次或者 3 次以上, 不符合 w3c 规范, JS 调用会出问题
- 一个标签只能调用一个 ID 选择器
- 一个标签只可以同时调用类选择器和 ID 选择器
- 特点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> #box{ font-size: 40px; color: rgb(0, 0, 255); background-color: rgb(255, 255, 0); } #miss{ text-align: center; } .box{ text-indent: 2em; } </style> </head> <body> <div id="box" class="box">AAAAA</div> <div>BBBBB</div> <p>CCCCC</p> <p>DDDDD</p> </body> </html>
- 通配符选择器(不推荐使用) *{属性: 值; 属性: 值}
- 特点: 给所有的标签都使用相同的样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> *{ font-size: 100px; color: red; } </style> </head> <body> <div>AAAAA</div> <div>BBBBB</div> <p>CCCCC</p> <p>DDDDD</p> <span>EEEEE</span> </body> </html>
- 交集选择器 标签 + 类(ID){属性: 值}
- 特点: 既要满足使用了某个标签, 还要满足使用了类(id)选择器
<head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ font-size: 50px; } div.box{ color: red; } #miss{ color: orange; } div#miss{ width: 400px; height: 300px; background-color: green; } .box#miss{ width: 400px; height: 400px; background-color: orange; } </style> </head> <body> <div class="box" id="miss">AAAAA</div> <p class="box">BBBBB</p> <div id="miss">CCCCC</div> </body> </html>
- 后代选择器 选择器(标签) + 空格 + 选择器(标签){属性: 值}
- 特点: 可以无限次隔代 只要能代表标签, 标签选择器 类选择器 ID选择器 自由组合
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ font-size: 40px; color: red; } div p span{ font-size: 50px; } .box span{ background-color: blue; } .box .miss{ color: red; } </style> </head> <body> <div class="box"> <p> <span class="miss">AAAAA</span> </p> </div> <div class="box"> <span>BBBBB</span> </div> </body> </html>
- 子代选择器 选择器>选择器{属性: 值}
- 特点: 选中的直接下一代元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div>span{ color: red; font-size: 40px; } p>span{ color: green; font-size: 40px; } </style> </head> <body> <div> <p> <span>AAAAA</span> </p> <span>BBBBB</span> </div> </body> </html>
- 并集选择器 选择器,选择器,选择器{属性: 值}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box,#miss,span,h1{ font-size: 100px; color: #fff; background-color: green; } </style> </head> <body> <div class="box">AAAAA</div> <p id="miss">BBBBB</p> <span>CCCCC</span> <h1>DDDDD</h1> </body> </html>