- 后代选择器(以空格分隔)
//html=======================
<div class="content1">
<p>第一个p</p>
<p>第二个p</p>
<div><p>第三个p</p></div>
</div>
//css=======================
div p {
background:red;
}
//div 后所有的p元素背景全是红色
- 子元素选择器(以大于号分隔）
//html=======================
<div class="content2">
<div>
<p>子元素里的p</p>
</div>
<p>
直系子1
</p>
<p>
直系子2
</p>
</div>
//css=======================
.content2>p {
background: yellow;
}
// 只有直系子1直系子2背景变黄
- 相邻兄弟选择器（以加号分隔）
//html=======================
<div>
我是相临元素1
</div>
<div class="content3">
<div>我是内容</div>
</div>
<div>
我是相临元素2
</div>
<div>我是相临元素3</div>
<p>我是相临元素4</p>
<div>
我是相临元素5
</div>
//css=======================
.content3+div {
background: green;
}
//只有相临元素2变绿
- 普通兄弟选择器（以破折号分隔）
//html=======================
<div>
我是相临元素1
</div>
<div class="content4">
<div>我是内容</div>
</div>
<div>
我是相临元素2
</div>
<div>我是相临元素3</div>
<p>我是相临元素4
<div>是我元素4-1</div>
<p>我是元素4-2
<div>是我元素4-2-1</div>
</p>
</p>
<div>
我是相临元素5
</div>
//css=======================
.content4~div {
background: blue;
}
// 只有 我的相临元素2、3、5、4-1、4-2-1颜色为蓝色
- 多个类共用一个样式(以逗号分隔)
//html=======================
<div>
<div class="content5">div内容</div>
<p class="content6">p内容</p>
<span class="content7">span内容</span>
</div>
//css=======================
.content5,.content6,.content7 {
color:lawngreen;
}
// 三个元素里面的内容全是亮绿色
- 多个元素有同一个类名如果改变当前元素当前类名的样式（以'.'连接）
//html=======================
<div>
<div class="content8">
我是div标签1
</div>
<p class="content8">
我是p标签
</p>
<div class="content8">
我是div标签2
</div>
<span class="content8">
我是span标签
</span>
</div>
//css=======================
div.content8 {
color:lightblue;
}
// 只有div里面的字是亮蓝色
