<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试案例</title> <style> .c1{ background-color:red;height:20px} div{ background-color:black;color:white} span div{ background-color:green;color:white} .c1 ,.c2 ,.c3 { background-color:green;color:white} .c1[n="nod"]{width:100px;height:100px;} </style> <!--/*c1为 class选择器*/--> <!--/*div为 标签选择器 会将文件内所有div设置为文件样式*/--> <!--层级选择器 span div--> <!--组合选择器.c1 .c2 .c3--> <!--属性选择器input[type="text"]{100px;height:100px;} 对选择到的标签通过属性再进行一次筛选--> </head> <body> <div style="background-color:red;height:20px">1</div> <div class="c1">2</div> <span>测试占位符<div>5</div></span> <br> <div class="c1">3</div> <br> <div>4</div> <input class="c1 "n="nod"> <input type="password"> </body> </html>
ps:优先级，标签上的style优先，编写顺序，就近原则