css的优先级权重

css的种类

style="color:red"行内样式
#div1{color:red}id选择器
.div1{color:red}类选择器
div{color:red}标签选择器
*{color:red}通用选择器

css的优先级

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器
遇到复杂的css又该如何判断优先级

a{color: yellow;}
div a {color: green;}
.demo a{color: black;}
#demo a{color: orange;}
div #demo a{color: red;}

可以通过计算权重来完成

a{color: yellow;}/* 1 */
div a {color: green;}/* 1+1 */
.demo a{color: black;}/* 10+1 */
#demo a{color: orange;}/* 100+1 */
div #demo a{color: red;}/* 1+100+1 */