简单选择器优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 简单选择器优先级顺序: !important>id选择器>类选择器>标签选择器>通配符选择器
如果在简单选择器里的某个样式上加了!important，那么此时它的优先级是最高的
**/
*{
color:yellow;
}
p{
color:blue;
}
.txt{
color:red !important;
}
#info{
color:green;
}
</style>
</head>
<body>
<p class="txt" id="info">我是一个段落</p>
</body>
</html>
复合选择器优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
* 当修饰元素的选择器是复合选择器时，先比较id选择器出现的次数，谁的id选择器的次数多，谁的优先级高；
* 在id选择器次数相同情况下，再比较类选择器的次数，谁的类选择器的次数多，谁的优先级高
*
*/
/* 1个标签选择器，2个id选择器 */
div #box-second-id #box-three-id {
color: blue;
}
/*1个标签选择符 1个id选择符 1个类选择符*/
div #box-second-id .box-three-class {
color: red;
}
</style>
</head>
<body>
<div class="box-first-class" id="box-first-id">
<div class="box-second-class" id="box-second-id">
<div class="box-three-class" id="box-three-id">
我是一个div标签
</div>
</div>
</div>
</body>
</html>
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
