- 后代選擇器(以空格分隔)
//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>我是內(nèi)容</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>我是內(nèi)容</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內(nèi)容</div>
<p class="content6">p內(nèi)容</p>
<span class="content7">span內(nèi)容</span>
</div>
//css=======================
.content5,.content6,.content7 {
color:lawngreen;
}
// 三個元素里面的內(nèi)容全是亮綠色
- 多個元素有同一個類名如果改變當前元素當前類名的樣式（以'.'連接）
//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里面的字是亮藍色
