- code
- a{color: yellow;} /* 权值: 0,0,0,1*/
- div a{color: green;} /* 权值: 0,0,0,2*/
- .demo a{color: black;} /* 权值: 0,0,1,1*/
- .demo input[type="text"]{color: blue;} /* 权值: 0,0,2,1*/
- .demo *[type="text"]{color: grey;} /* 权值: 0,0,2,0*/
- #demo a{color: orange;} /* 权值: 0,1,0,1*/
div#demo a{color: red;} /* 权值: 0,1,0,2*/
<a href=""> 第一条应该是黄色 </a> <!- 适用第 1 行规则 ->
- <div class="demo">
- <input type="text" value="第二条应该是蓝色" /><!- 适用第 4,5 行规则, 第 4 行优先级高 ->
<a href=""> 第三条应该是黑色 </a><!- 适用第 2,3 行规则, 第 3 行优先级高 ->
- </div>
- <div id="demo">
- <a href=""> 第四条应该是红色 </a><!- 适用第 5,6 行规则, 第 6 行优先级高 ->
- </div>
- `
来源: http://www.jianshu.com/p/dc97ef9d1fe6