溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css中兄弟選擇器怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
主要講解css中兄弟選擇器的使用，以及+和~的區別有哪些？如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。
+選擇器的使用
比如：
<styletype="text/css">
h2+p{
margin-top:50px;
color:red;
}
</style>
<p>Thisisparagraph.</p>
<h2>Thisisaheading.</h2>
<p>Thisisparagraph.</p>
<p>Thisisparagraph.</p>
效果圖如下：
兄弟選擇器只會影響下面的p標簽的樣式，不影響上面兄弟的樣式。
注意這里的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應用在兄弟元素上，跟參照的元素樣式無關，如上例只影響p元素的樣式，而不影響h2標簽的樣式。當然這個也會循環查找，即當兩個兄弟元素相同時，會一次循環查找：
<styletype="text/css">
li+li{
color:red;
}
</style>
<div>
<ul>
<li>Listitem1</li>
<li>Listitem2</li>
<li>Listitem3</li>
</ul>
</div>
效果如下：
Listitem1
Listitem2
Listitem3
可以看出第一個li字體顏色沒有變紅，第二個和第三個元素字體變紅，這就是因為第三個li是第二個li的兄弟元素，所以也會應用樣式。
~選擇器的使用
作用是查找某一個指定元素的后面的所有兄弟結點。示例代碼：
<styletype="text/css">
h2~p{
color:red;
}
</style>
<p>1</p>
<h2>2</h2>
<p>3</p>
<p>4</p>
<p>5</p>
關于“css中兄弟選擇器怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
