CSS-選擇器6-兄弟選擇器
1、兄弟選擇器
| 選擇器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| element+element | div+p | 選擇緊接在 div 元素之後的所有 p 元素。 | 2 |
| element1~element2 | div~p | 選擇在div元素之後的所有p元素。 | 3 |
2、效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS相鄰兄弟選擇器</title>
<style type="text/css">
.div2+p{
color: red;
}
</style>
</head>
<body>
<p class="p">p1</div>
<div class="div1">div1</div>
<p class="p">p2</div>
<div class="div2">div2</div>
<p class="p">p3</div>
<div class="div3">div3</div>
<p class="p">p4</div>
<div class="div4">div4</div>
<p class="p">p5</div>
<div class="div5">div5</div>
</body>
</html>
執行效果：
image.png
如果使用 ** div~p** 執行效果：
image.png
相關文章
- CSS-選擇器4-後代選擇器CSS
- CSS E~F 兄弟選擇器CSS
- 002---選擇器（標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器）字元
- jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- jQuery選擇器——基本選擇器jQuery
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- jQuery選擇器——層次選擇器jQuery
- JQuery選擇器——可見性篩選選擇器和屬性篩選選擇器jQuery
- CSS-選擇器15-:before與:afterCSS
- CSS3新增選擇器（屬性選擇器、結構偽類選擇器、偽元素選擇器）CSSS3
- jQuery選擇器之層次選擇器jQuery
- CSS選擇器（5）——屬性選擇器CSS
- jQuery選擇器——基本過濾選擇器jQuery
- CSS ID選擇器與CLASS選擇器CSS
- CSS3 相鄰兄弟選擇器 hoverCSSS3
- jQuery選擇器——內容過濾選擇器jQuery
- jQuery選擇器——子元素過濾選擇器jQuery
- jQuery選擇器——屬性過濾選擇器jQuery
- css 兄弟選擇器簡單程式碼例項CSS
- css3 選擇器：屬性選擇器（五）CSSS3
- jQuery選擇器——表單元素過濾選擇器jQuery
- jQuery選擇器——可見性過濾選擇器jQuery
- jQuery選擇器jQuery
- css選擇器CSS
- jQuery 選擇器jQuery
- CSS 選擇器CSS
- CSSHack 選擇器CSS
- jQuery 選擇器彙總-思維導圖-選擇器jQuery
- CSS5-選擇器5-子元素選擇器CSS
- 淺談邏輯選擇器 -- 父選擇器它來了！
- CSS :required 選擇器CSSUI
- CSS :optional 選擇器CSS
- css選擇器概述CSS
- CSS選擇器(一)CSS
- CSS 元素選擇器CSS
- CSS常用選擇器CSS
- HTML常用選擇器HTML
- jQuery選擇器(下)jQuery