css的复杂选择器
后代选择器
后代选择器使用空格间隔开 （A B：在A元素中寻找后代（不一定是儿子）是B的元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/* .box li{
background-color: red;
}*/
div li{
background-color: pink;
}
.show{}
.box .show{}
.outer .show{}
html body div .show{}
</style>
</head>
<body>
<div class="outer">
<p>p1</p>
<p>p2</p>
<span>span1</span>
<ul class="box">
<li>111</li>
<li class="show">222</li>
</ul>
<ol>
<li>333</li>
<li>444</li>
</ol>
</div>
</body>
</html>Copy to clipboardErrorCopied
子代选择器
子代选择器使用 > 间隔开 （A>B：在A元素中寻找儿子辈元素 是B的元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
.box>.show{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<p>p1</p>
<p>p2</p>
<span>span1</span>
<ul class="box">
<li>111</li>
<li class="show">222</li>
<li>
<span class="show"></span>
</li>
</ul>
<ol>
<li>333</li>
<li class="show">444</li>
</ol>
</div>
</body>
</html>Copy to clipboardErrorCopied
相邻兄弟选择器：
相邻兄弟选择器使用 + 间隔开 （A+B：在A元素的下边紧贴着A的元素 并且是B 才能被选中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style>
.outer>.show+span{
background-color: yellow;
}
.outer>.show+p{
/*选不中状态*/
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<p>p1</p>
<p class="show">p2</p>
<span>span1</span>
<p>p3</p>
<span>span2</span>
</div>
</body>
</html>Copy to clipboardErrorCopied
通用兄弟选择器：
相邻兄弟选择器使用 ~ 间隔开 （A~B：在A元素的下边兄弟元素 并且是B 就能被选中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style>
.outer>.show~span{
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<span>span0</span>
<p>p1</p>
<p class="show">p2</p>
<span>span1</span>
<p>p3</p>
<span>span2</span>
</div>
</body>
</html>Copy to clipboardErrorCopied
群组选择器：
- 将多个选择器使用
，隔开 可以同时对多个选择器设置样式 - 如果多个元素有相同的样式，方法有两种
- 使用一个共同的类名
- 使用群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
/*.con{
width: 100px;
height: 100px;
}*/
.con1,.con2,.con3,.con4{
width: 100px;
height: 100px;
}
.con1{
background-color: red;
}
.con2{
background-color: #c0ff8b;
}
.con3{
background-color: #5e8fff;
}
.con4{
background-color: #ff2a91;
}
</style>
</head>
<body>
<ul>
<li class="con1 con"></li>
<li class="con2 con"></li>
<li class="con3 con"></li>
<li class="con4 con"></li>
</ul>
</body>
</html>Copy to clipboardErrorCopied
交集选择器
- “交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集
- 其中第一必须是标签名选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
/*
当我们想要选择： 某一个元素 并且这个元素拥有某个类名的时候
*/
.list li{
width: 30px;
height: 30px;
border: 1px solid #000;
margin: 30px;
border-radius: 50%;
background-color: pink;
}
.list li.active{
background-color: skyblue;
}
</style>
</head>
<body>
<div class="outer">
<ul class="list">
<li></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>Copy to clipboardErrorCopied
选择器的优先级
相同优先级的选择器生效方式
- 当优先级相同的时候，在后边书写的样式优先级高
- link元素 其实也是把样式关联上，选择器优先级相同的情况写，后写的生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
}
.con{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<link rel="stylesheet" href="./01.css">
</head>
<body>
<div class="box con show">
box
</div>
</body>
</html>Copy to clipboardErrorCopied
选择器优先级的权重计算：
- 行内样式： 1000
- id：100
- 类：10
- 标签名：1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器优先级2</title>
<style>
#box p{
/*1 --101*/
background-color: red;
}
#box .con p{
/*2 -- 111*/
background-color: pink;
}
.box #con p{
/*3--111*/
background-color: green;
}
.box .show p{
/*4--21*/
background-color: yellow;
}
.box .con .show p{
/*5 -- 31*/
background-color: grey;
}
#box .show p {
/*6 --111*/
background-color: purple;
}
#box #con .show p{
/*7 -- 211*/
background-color: #5ab3f4;
}
#box #con #show p{
/*8 -- 301*/
background-color: #5df2ff;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="con" class="con">
<div class="show" id="show">
<p>我是一个p标签</p>
</div>
</div>
</div>
</body>
</html>Copy to clipboardErrorCopied
选择器优先级覆盖案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级覆盖案例</title>
<style>
.outer li{
width: 100px;
height: 100px;
margin: 10px;
background-color: grey;
float: left;
}
.outer .active{
background-color: red;
}
</style>
</head>
<body>
<ul class="outer">
<li></li>
<li></li>
<li></li>
<li></li>
<!-- 将来使用js，哪一个li拥有样式，就给它active的类名 -->
<li class="active"></li>
<li></li>
</ul>
</body>
</html>
浙公网安备 33010602011771号