关系选择器：
- 后代选择器 空格
选择器1 选择器2{
}
选中所有的后代（包含儿子）
- 子代选择器 >
选择器1>选择器2{
}
选中所有直接子代（只有儿子）
- 相邻兄弟选择器 +
选择器1+选择器2{
}
- 通用兄弟选择器 ~
选择器1~选择器2{
}
例子：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*.box{
width: 100px;
height: 400px;
background-color: blue;
overflow: auto;
}*/
/*.box span{ 后代选择器
color: blue;
}*/
/*.box>span{
color: red; 子代选择器
}*/
/*.box>p>span{
color: green; 子代选择器
}*/
/*.two+p{
color: blue; 只有与two相邻的3是蓝色
}*/
.two~p{
color: #008000 ; /*只选择2后面的元素*
}
</style>
</head>
<body>
<div class="box">
<span>box的儿子span</span>
<p>
box的儿子
<span>box的孙子span</span>
</p>
</div>
<p>1</p>
<p class="two">2</p>
<p>3</p>
<p>4</p>
</body>
</html>
合并选择器（公共样式）：选择器1，选择器2{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one,.two{ /*就是有相同的样式可以这样写*/
width: px;
height: 300px;
}
.one{
background-color: red;
}
.two{
background-color: green;
}
.three{
background-color: aqua;
}
</style>
</head>
<body>
<div class="one">ddd</div>
<div class="two">dccc</div>
<div class="three"></div>
<div></div>
</body>
</html>
扫一扫
4221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
