群组选择器、后代选择器与子代选择器的优先级
群组选择器
要对不同的HTML对象定义相同样式时,可以采用群组选择器。例如:
要对p1,p2同时设置相同的颜色。
.p1,.p2{color:#aaa;}
上述规则在选择器中指定了多个对象,对象之间用逗号来分隔。逗号告诉浏览器,规则中包含两个不同的选择器。这样的选择器叫群组选择器。
后代选择器与子代选择器的概念与区别
后代选择器是指只要具备层级关系的元素,被嵌套的都可以成为后代元素。祖先元素包含所有的后代元素。
语法:#div1 span{ color:green;}
选择器中间用逗号隔开
子代选择器是指只具备一级层级关系的子元素被嵌套。被父元素包含的子元素。
语法#div1>span{color:green;}
父代选择器用>指向子代选择器。
关于三种选择器的优先级
首先我们将群组选择器与后代选择器进行比较。
预设p1,p1,代码如下:
```css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>优先级</title>
<style>
.p1,.p2{
color: red;
}
.main .p1{
color: pink;
}
.main .p2{
color: pink;
}
</style>
</head>
<body>
<div class="main">
<div class="p1">这是第一个</div>
<div class="p2">这是第二个</div>
</div>
</body>
</html>
群组选择器将字体颜色设置为红色,后代选择器设置为粉色。
运行结果显示字体颜色变成了粉色;
我们将两个不同选择器改变位置再进行对比
<html>
<head>
<meta charset="utf-8" />
<title>优先级</title>
<style>
.main .p1{
color: pink;
}
.main .p2{
color: pink;
}
.p1,.p2{
color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="p1">这是第一个</div>
<div class="p2">这是第二个</div>
</div>
</body>
</html>
运行结果依旧是粉色。
由此,我们推断,后代选择器的优先级要大于群组选择器。
后代选择器与子代选择器进行比较
<html>
<head>
<meta charset="utf-8" />
<title>优先级</title>
<style>
.main .p1{
color: red;
}
.main .p2{
color:red;
}
.main>.p1{
color:blue
}
.main>.p2{
color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="p1">这是第一个</div>
<div class="p2">这是第二个</div>
</div>
</body>
</html>
运行结果
结果显示字体变为蓝色;
改变代码位置再试一次
<html>
<head>
<meta charset="utf-8" />
<title>优先级</title>
<style>
.main .p1{
color: red;
}
.main>.p1{
color:blue
}
.main>.p2{
color: blue;
}
.main .p2{
color:red;
}
</style>
</head>
<body>
<div class="main">
<div class="p1">这是第一个</div>
<div class="p2">这是第二个</div>
</div>
</body>
</html>
结果显示p1为蓝色,p2为红色,由此我们推断,子代选择器与后代选择器的优先级相同,按照代码顺序解析,后面的会覆盖前面的。
所以三种选择器的优先级,群组选择器小于后代选择器,后代选择器与子代选择器优先级大小相同。