组合选择器
组合选择器
特性：每个选择器可以为任意基本选择器或选择器组合
群组选择器
群组选择器用，隔开。每个选择器为均可以为任意合法选择器或选择器组合，可以控制多个
div,.s,section{
color:red;
}
子代，后代选择器
1.一次性控制一个选择器（逻辑最后的那个选择器），前置位的选择器为修饰性选择器
2.每一个选择器位均可以为任意合法选择器或选择器组合
3.子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
子代选择器用>连接
body>div{
color:red;
}
后代选择器用空格连接
.sup .sub{
color:red;
}
相邻（兄弟选择器）
一次性控制一个选择器（逻辑最后的那个选择器），前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
相邻选择器 + 连接
代码相邻 样式块作用于最后一个标签
span + section{
background-color:pink;
}
兄弟选择器 ~连接
包含相邻选择器
div ~ section{
background-color:brown;
}
交集选择器
即是选择器1又是选择器2
i.s{
color:yellow;
}
多类名选择器
多类名选择器
.d1{
color:blue;
}
.d1.d2{
color:tan;
}
.d1.d2.d3{
color:#582;
}
<div class="d1 d2 d3">heh</div>
组合选择器优先级
组合选择器优先级与权值相关，权值为权重和
权重对应关系
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>组合选择器优先级</title>
<style>
同目录结构下
1.子代与后代优先级相同
body>div == body div
2，相邻与兄弟优先级相同
div+span == div~span
3.最终样式采用逻辑后的样式值
不同目录结构下
1.根据选择器权值进行比较
2.权值为标签权重之和
3.权重 *：1 div：10 class：100 id：1000 ！important：10000
4.权值比较时，关心的是值大小，不关心位置与具体选择器名
注：控制的是同一目标，才具有可比性
5.id永远比class大，class永远比标签大
/* 权重10 */
div{
color:red;
}
/* 权重20 */
div div{
color:yellow;
}
/* 大于一切标签 */
.d2{
color:blue;
}
/* .d2抵消 剩权重10 */
div .d2{
color:orange;
}
/* 等价于 div .d2 ，权值相同 位置决定 */
.di div{
color:pink;
}
/* 多10 */
div .d1 div{
color:tan;
}
/* 不具有可比性 */
div .d1>div{
color:green;
}
/* 高于一切 */
#dd1 div{
color:#000;
}
</style>
</head>
<body>
<div>
<div class="di">
<div id="dd1">
<div>
<div class="d2">123456</div>
</div>
</div>
</div>
</div>
</body>
</html>
- 选择器权值比较，只关心权重和，不更新选择器位置
- 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合
属性选择器
- [attr]：匹配拥有attr属性的标签
- [attr=val]：匹配拥有attr属性，属性值为val的标签
- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
- [attr*=val]：匹配拥有attr属性，属性值包含val的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>属性选择器</title>
<style type="text/css">
.d2{
color:red;
}
/* 属性选择器权重==class选择器权重 */
/* 有属性class的所有标签 */
[class]{
color:orange;
}
/* 有属性class且值为d2的所有标签（值不影响权重） */
[class="d2"]{
color:pink;
}
/* 交集选择器 */
/* 是div且class="d2" ，权重增加*/
div[class="d2"]{
color:blue;
}
/* 属性以什么开头：^= */
/* 属性以什么结尾：$= */
/* 属性模糊匹配: *= */
[class ^="he"]{
color:yellow;
}
[class $="lo"]{
color:tan;
}
[class *='el']{
color:cyan;
}
[class][dd]{
color:lightgoldenrodyellow;
}
</style>
</head>
<body>
<!-- div.di>.d2 -->
<div class="d1">000000
<div class="d2">123456</div>
<div class="hello" dd >helloworld</div>
</div>
<!-- <i><span class="di"></span></i> -->
</body>
</html>
