前端学习之CSS---样式表的优先级和选择器

前端学习之旅开始

样式表的优先级

!important > 行内样式 > 内部样式 > 外部样式

div{
    color:red!important; // !important 样式
    background-color:blue; // 普通外部样式
}

//行内样式
<div style="color:orange;">12345</div>

//内部样式
<style>
    div{
        color:yellow;
    }
</style>

---

 

选择器

// 标签选择器
h1{
    color:yellow;
}
// 类选择器
.class{
    color:yellow;
}
// id选择器
#id{
    color:yellow;
}
// 通配符选择器
*{
    color:yellow;
}
// 群组选择器(标签用逗号隔开，此处为拥有这四个标签的都会被修改样式)
div,.class,#id,h1{
    background-color:yellow;
}
// 后代选择器(标签用空格隔开，此处为被div包裹的.class会被修改样式)从右到左进行匹配
div .class{
    background-color:yellow;
}
// 伪类选择器，常用在<a>链接上，使用时注意顺序 link--visited--hover--active
a:link{
    color:red;//初始状态
}
a:visited{
    color:purple;//访问过后
}
a:hover{
    color:yellow;//鼠标悬停时
}
a:active{
    color:blue;//超链接被激活时，被按下时
}

---

 

选择器的权重

优先级(升序)	选择器	权重（css中用四位数字表示权重）
1	元素选择器（h1,p,div）	0001
2	类选择器	0010
3	id选择器	0100
4	包含选择器（后代选择器）	所包含的选择器的权重之和
5	内联样式（行内样式）	1000
6	!important	10000

不同选择符样式冲突时，高权重覆盖低权重

权重相同时，样式遵循就近原则