CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用

本文小編為大家詳細介紹“CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

平鄉網站制作公司哪家好，找成都創新互聯！從網頁設計、網站建設、微信開發、APP開發、響應式網站建設等網站項目制作，到程序開發，運營維護。成都創新互聯于2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創新互聯。

前言：我們在碼代碼的時候，經常會遇到需要給第一個或者最后一個元素添加或刪除樣式，還有一些比較特殊的是選取第幾個元素添加或刪除樣式，下面記錄css選擇器中常見的選擇器：相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（——）、first-child、：last-child、：nth-child（）、：nth-last-child（）的用法。

相鄰兄弟選擇器（+）

相鄰兄弟選擇器可選擇緊接在另一個元素后的元素，且二者具有相同的父親元素。注釋：與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。

器。

在學習上有什么疑問隨時可以找我我，與大家分享互聯網web前端實戰操作，無論你是否有基礎，我都歡迎。點：前端技術分享

<!DOCTYPE html>

<html>

<head>

<title>相鄰兄弟選擇器</title>

h2+p{

color:red;

}

</style>

</head>

<body>

<p>Hello word!</p>

<h2>Hello word!</h2>

<p>Hello word!</p>

</body>

</html>

效果圖如下：

兄弟只會影響下面的p標簽的樣式，不影響上面兄弟的樣式。

注意這里的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應用在兄弟元素上，跟參照的元素樣式無關，如上例只影響p元素的樣式，而不影響h2標簽的樣式。

當然這個也會循環查找，即當兩個兄弟元素相同時，會再一次循環查找：

示例：

li + li {

color:red;

}

</style>

<div>

<ul>

</ul>

</div>

可以看出第一個li字體顏色沒有變紅，第二個和第三個元素字體變紅，這就是因為第三個li是第二個li的兄弟元素，所以也會應用樣式。

兄弟選擇器（——）

作用是查找某一個指定元素的后面的所有兄弟結點。

示例代碼：

h2 —— p{

color:red;

}

</style>

</head>

<body>

</body>

效果展示：

后代選擇器（包含選擇器）

可以選擇某元素后代的元素（子子孫孫元素）

子選擇器（>）

只能選擇作為某元素兒子元素的元素，不包括孫元素、曾孫元素等等等。

后代選擇器，子選擇器和相鄰兄弟選擇器結合使用示例：

請看下面這個選擇器：

html > body table + ul {margin-top:20px;}

這個選擇器解釋為：選擇緊接在 table 元素后出現的第一個相鄰兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。

：first-child 選擇器

li:first-child

{

background:yellow;

}

<ul>

</ul>

<ol>

</ol>

效果圖

值得注意的是，如果其父元素的第一個元素（p）不是該指定類型元素（li），則第一個元素不會有樣式

li:first-child

{

background:yellow;

}

<ol>

</ol>

效果圖

：last-child選擇器

：last-child 選擇器匹配屬于其父元素的最后一個子元素的每個元素。

提示：p:last-child 等同于 p:nth-last-child（1）。

eg：指定屬于其父元素的最后一個子元素的 p 元素的背景色：

p:last-child

{

background:#ff0000;

}

<body>

<p>第一個段落。</p>

<p>第二個段落。</p>

<p>第三個段落。</p>

<p>第四個段落。</p>

<p>第五個段落。</p>

</body>

效果：

說明：p標簽的父元素是body，body標簽中最后一個p元素是第五個段落

：nth-child（）

：nth-child（）選擇器，該選擇器選取父元素的第 N 個子元素，與類型無關。

p:nth-child（2）

{

background:#ff0000;

}

<body>

<p>第一個段落。</p>

<p>第二個段落。</p>

<p>第三個段落。</p>

<p>第四個段落。</p>

<p><b>注釋：</b>Internet Explorer 不支持 :nth-child（）選擇器。</p>

</body>

：nth-child（）的詳細用法

nth-child（3）表示選擇列表中的第三個元素。

nth-child（2n）表示列表中的偶數標簽，即選擇第2、第4、第6……標簽

nth-child（2n-1）表示選擇列表中的奇數標簽，即選擇第1、第3、第5、第7……標簽

nth-child（n+3）表示選擇列表中的標簽從第3個開始到最后（>=3）

nth-child（-n+3）表示選擇列表中的標簽從0到3，即小于3的標簽（<=3）

nth-last-child（3）表示選擇列表中的倒數第3個標簽

：nth-of-type（n）

：nth-of-type（n）選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素。

n 可以是數字、關鍵詞或公式。

p:nth-of-type（2）

{

background:#ff0000;

}

<body>

<p>第一個段落。</p>

<p>第二個段落。</p>

<p>第三個段落。</p>

<p>第四個段落。</p>

<p>第五個段落。</p>

</body>

效果圖：

：nth-last-child（）選擇器

：nth-last-child（n）選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數。

n 可以是數字、關鍵詞或公式。

提示：請參閱 :nth-last-of-type（）選擇器，該選擇器選取父元素的第 N 個指定類型的子元素，從最后一個子元素開始計數。

CSS3 :not 選擇器

：not（selector）選擇器匹配非指定元素/選擇器的每個元素。

擴展

菜單欄右邊框的實現方法有多種，結合上面介紹的選擇器，實現方法分別如下：

一、常規方法：

。nav li{

border-right:1px solid #fff;

}

。nav li:last-child{

border-right-width:0px;

}

二：結合相鄰兄弟選擇器（+）

。nav li + li{

border-left:1px solid #fff;

}

三、結合兄弟選擇器（——）

。nav li:first-child —— li{

border-left:1px solid #fff;

}

四、結合：not（）選擇器

。nav li:not（：last-child）{

border-right:1px solid #fff;

}

讀到這里，這篇“CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注創新互聯行業資訊頻道。

網站欄目：CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用
網站鏈接：http://www.yijiale78.com/article6/gdcdog.html

成都網站建設公司_創新互聯，為您提供移動網站建設、標簽優化、企業建站、微信公眾號、網站導航、網站改版

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用