代码
<html> <head> <title>全局声明</title> <style type="text/css"> *{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } </style> </head> <body> <h1>全局声明h1</h1> <h2 class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html>
说明：
全局声明之后，h1、h2、h3的大小都变成了15px
代码
<html> <head> <title>全局声明</title> <style type="text/css"> body{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } </style> </head> <body> <h1>全局声明h1</h1> <h2 class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html>
说明
body声明之后，下面继承的元素，又会改变样式，比如h1、h2、h3等等，会在此基础上，加上h1、h2、h3的样式
代码
<html> <head> <title>全局声明</title> <style type="text/css"> *{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ color:red; /* 文字颜色 */ font-size:30px; } </style> </head> <body> <h1>全局声明h1</h1> <h2 class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html>
说明
*之后，执行class，会覆盖掉*的样式，指定元素后的class会继续覆盖class下的样式
暂时理解到这