<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*1 元素选择器*/ p{ text-align: center; color: red; } /*2 id选择器*/ #paral1{ text-align: center; color: yellow; } /*3 类选择器（适用于所有元素）*/ .center{ text-align: center; color: blue; } /*4 类选择器（仅适用于<p>元素）*/ p.center1{ text-align: center; color: green; } /*5 引用两个类的HTML元素*/ p.center2{ text-align: center; color: orange; } p.large{ font-size: 300%; } /*6 通用选择器*/ /**{*/ /* text-align: center;*/ /* color: black;*/ /* }*/ /*7 分组选择器*/ h1, h2, p{ text-align: center; color: pink; font-size: 300%; } </style> </head> <body> 1 元素选择器 p{ text-align: center; color: red; } <p>every paragraph will be affected by the style</p> <p id="paral"> Me too!</p> <p>And me!</p> 2 id选择器 #paral1{ text-align: center; color: darkred; } <p id="paral1"> Hello World! </p> 3 类选择器（适用于所有元素） .center{ text-align: center; color: blue; } <h1 class="center">绿且居中 标题 </h1> <p class="center">绿且居中 段落 </p> 4 类选择器（仅适用于<'p'>元素） p.center1{ text-align: center; color: green; } <h1 class="center1">标题 不受影响</h1> <p class="center1">段落 居中变蓝</p> 5 引用两个类的HTML元素 p.center2{ text-align: center; color: orange; } p.large{ font-size: 300%; } <h1 class="center2">标题不受影响</h1> <p class="center2">段落居中变橙色</p> <p class="center2 large">段落居中变橙色且字体变大</p> 6 通用选择器 //通用注释了，要不都染了 *{ text-align: center; color: black; } <h1> Hello world! how are you ??? </h1> <p> 每个月元素都被染了把 </p> <p> 学之染人，甚于丹青 </p> 7 分组选择器 h1, h2, p{ text-align: center; color: pink; font-size: 300%; } <h1> 还好吗？ </h1> <h2> 嗯 </h2> <p> 那就好 </p> 权重优先等级:important>内联选择器（style) > id选择器 >类选择器 > 标签选择器 >通配符选择器 值为: style 1000 id 100 class 10 标签 1 通配符 0 </body> <script src="./scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> </script> </html>