溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言：我們在碼代碼的時候，經常會遇到需要給第一個或者最后一個元素添加或刪除樣式，還有一些比較特殊的是選取第幾個元素添加或刪除樣式，下面記錄css選擇器中常見的選擇器:相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。
相鄰兄弟選擇器可選擇緊接在另一個元素后的元素，且二者具有相同的父親元素。注釋：與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。
器。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相鄰兄弟選擇器</title>
<style type="text/css">
h2+p{
color:red;
}
</style>
</head>
<body>
<p>Hello word!</p>
<p>Hello word!</p>
<h2>Hello word!</h2>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
</body>
</html>
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
效果圖如下：
兄弟只會影響下面的p標簽的樣式，不影響上面兄弟的樣式。
注意這里的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應用在兄弟元素上，跟參照的元素樣式無關，如上例只影響p元素的樣式，而不影響h2標簽的樣式。
當然這個也會循環查找，即當兩個兄弟元素相同時，會再一次循環查找：
示例：
<style type="text/css">
li + li {
color:red;
}
</style>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
可以看出第一個li字體顏色沒有變紅，第二個和第三個元素字體變紅，這就是因為第三個li是第二個li的兄弟元素，所以也會應用樣式。
作用是查找某一個指定元素的后面的所有兄弟結點。
示例代碼：
<style type="text/css">
h2 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h2>2</h2>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
效果展示：
可以選擇某元素后代的元素（子子孫孫元素）
只能選擇作為某元素兒子元素的元素，不包括孫元素、曾孫元素等等等。
請看下面這個選擇器：
html > body table + ul {margin-top:20px;}
這個選擇器解釋為：選擇緊接在 table 元素后出現的第一個相鄰兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。
li:first-child
{
background:yellow;
}<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可樂</li>
</ul>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>可口可樂</li>
</ol>
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
效果圖
值得注意的是，如果其父元素的第一個元素（p）不是該指定類型元素（li），則第一個元素不會有樣式
li:first-child
{
background:yellow;
}<ol>
<p>測試</p>
<li>咖啡</li>
<li>茶</li>
<li>可口可樂</li>
</ol>效果圖
:last-child 選擇器匹配屬于其父元素的最后一個子元素的每個元素。
提示：p:last-child 等同于 p:nth-last-child(1)。
eg：指定屬于其父元素的最后一個子元素的 p 元素的背景色：
p:last-child
{
background:#ff0000;
}<body>
<h2>這是標題</h2>
<p>第一個段落。</p>
<p>第二個段落。</p>
<p>第三個段落。</p>
<p>第四個段落。</p>
<p>第五個段落。</p>
</body>效果：
說明：p標簽的父元素是body，body標簽中最后一個p元素是第五個段落
:nth-child() 選擇器，該選擇器選取父元素的第 N 個子元素，與類型無關。
p:nth-child(2)
{
background:#ff0000;
}<body>
<h2>這是標題</h2>
<p>第一個段落。</p>
<p>第二個段落。</p>
<p>第三個段落。</p>
<p>第四個段落。</p>
<p><b>注釋：</b>Internet Explorer 不支持 :nth-child() 選擇器。</p>
</body>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) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素.
n 可以是數字、關鍵詞或公式。
p:nth-of-type(2)
{
background:#ff0000;
}<body>
<h2>這是標題</h2>
<p>第一個段落。</p>
<div>測試</div>
<p>第二個段落。</p>
<p>第三個段落。</p>
<p>第四個段落。</p>
<p>第五個段落。</p>
</body>
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
效果圖：
:nth-last-child(n) 選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數。
n 可以是數字、關鍵詞或公式。
提示：請參閱 :nth-last-of-type() 選擇器，該選擇器選取父元素的第 N 個指定類型的子元素，從最后一個子元素開始計數。
: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;
}.nav li:not(:last-child){
border-right:1px solid #fff;
}免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
