<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css权重</title>
</head>
<style>
/*权重*/
/*多个样式作用在一个元素上，样式冲突时就会产生样式优先级权重问题*/
/*id选择器 0100*/
/*class、属性选择器 0010*/
/*标签、伪类选择器 0001*/
/*通配符(*) 0000*/
/*行内样式 1000*/
/*!important 强制使用样式，优先级最高*/
/*继承*/
/*子元素可以继承父元素设置的样式，遵循就近原则*/
/*子元素并不是继承全部样式。比如边框、高度等并不会继承*/
/*继承的规则没有权重 NULL*/
/*子元素定义样式时继承被打破，以子元素定义的样式为准*/
/*权重示例*/
/*11*/
body .color {
color: red;
}
/*20*/
.color[name] {
color: green;
}
/*继承和通配符(*)的比较*/
/*0*/
/** {*/
/* color: red;*/
/*}*/
/*1 推荐使用*/
html {
color: red;
}
/*1*/
h3 {
color: blue;
}
</style>
<body>
<!--权重示例-->
<h2 name="hhe" class="color" id="hot">HDCMS</h2>
<!--继承和通配符(*)的比较-->
<article>
<h3>
hdcms
<span>内容管理系统</span>
</h3>
</article>
</body>
</html>
