css中兄弟選擇器怎么用

這篇文章將為大家詳細(xì)講解有關(guān)css中兄弟選擇器怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　主要講解css中兄弟選擇器的使用，以及+和~的區(qū)別有哪些？如果需要選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。

　　+選擇器的使用

　　比如：

　　<styletype="text/css">

　　h2+p{

　　margin-top:50px;

　　color:red;

　　}

　　</style>

　　<p>Thisisparagraph.</p>

　　<h2>Thisisaheading.</h2>

　　<p>Thisisparagraph.</p>

　　<p>Thisisparagraph.</p>

　　效果圖如下：

　　兄弟選擇器只會(huì)影響下面的p標(biāo)簽的樣式，不影響上面兄弟的樣式。

　　注意這里的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應(yīng)用在兄弟元素上，跟參照的元素樣式無(wú)關(guān)，如上例只影響p元素的樣式，而不影響h2標(biāo)簽的樣式。當(dāng)然這個(gè)也會(huì)循環(huán)查找，即當(dāng)兩個(gè)兄弟元素相同時(shí)，會(huì)一次循環(huán)查找：

　　<styletype="text/css">

　　li+li{

　　color:red;

　　}

　　</style>

　　<div>

　　<ul>

　　<li>Listitem1</li>

　　<li>Listitem2</li>

　　<li>Listitem3</li>

　　</ul>

　　</div>

　　效果如下：

　　Listitem1

　　Listitem2

　　Listitem3

　　可以看出第一個(gè)li字體顏色沒(méi)有變紅，第二個(gè)和第三個(gè)元素字體變紅，這就是因?yàn)榈谌齻€(gè)li是第二個(gè)li的兄弟元素，所以也會(huì)應(yīng)用樣式。

　　~選擇器的使用

　　作用是查找某一個(gè)指定元素的后面的所有兄弟結(jié)點(diǎn)。示例代碼：

　　<styletype="text/css">

　　h2~p{

　　color:red;

　　}

　　</style>

　　<p>1</p>

　　<h2>2</h2>

　　<p>3</p>

　　<p>4</p>

　　<p>5</p>

關(guān)于“css中兄弟選擇器怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。