資訊專欄INFORMATION COLUMN
摘要：前言我們在碼代碼的時候，經(jīng)常會遇到需要給第一個或者最后一個元素添加或刪除樣式，還有一些比較特殊的是選取第幾個元素添加或刪除樣式，下面記錄選擇器中常見的選擇器相鄰兄弟選擇器子選擇器兄弟選擇器的用法。
前言：我們在碼代碼的時候，經(jīng)常會遇到需要給第一個或者最后一個元素添加或刪除樣式，還有一些比較特殊的是選取第幾個元素添加或刪除樣式，下面記錄css選擇器中常見的選擇器:相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相鄰兄弟選擇器（+）
相鄰兄弟選擇器可選擇緊接在另一個元素后的元素，且二者具有相同的父親元素。注釋：與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符。
器。
相鄰兄弟選擇器
Hello word!
Hello word!
Hello word!
Hello word!
Hello word!
Hello word!
Hello word!
效果圖如下：
兄弟只會影響下面的p標簽的樣式，不影響上面兄弟的樣式。
注意這里的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應(yīng)用在兄弟元素上，跟參照的元素樣式無關(guān)，如上例只影響p元素的樣式，而不影響h1標簽的樣式。
當然這個也會循環(huán)查找，即當兩個兄弟元素相同時，會再一次循環(huán)查找：
示例：
- List item 1
- List item 2
- List item 3
可以看出第一個li字體顏色沒有變紅，第二個和第三個元素字體變紅，這就是因為第三個li是第二個li的兄弟元素，所以也會應(yīng)用樣式。
兄弟選擇器（~）作用是查找某一個指定元素的后面的所有兄弟結(jié)點。
示例代碼：
1
2
3
4
5
效果展示：
可以選擇某元素后代的元素（子子孫孫元素）
子選擇器（>）只能選擇作為某元素兒子元素的元素，不包括孫元素、曾孫元素等等等。
后代選擇器，子選擇器和相鄰兄弟選擇器結(jié)合使用示例：請看下面這個選擇器：
html > body table + ul {margin-top:20px;}
這個選擇器解釋為：選擇緊接在 table 元素后出現(xiàn)的第一個相鄰兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。
li:first-child
{
background:yellow;
}
效果圖
值得注意的是，如果其父元素的第一個元素（p）不是該指定類型元素（li），則第一個元素不會有樣式
li:first-child
{
background:yellow;
}
測試
- 咖啡
- 茶
- 可口可樂
效果圖
:last-child 選擇器匹配屬于其父元素的最后一個子元素的每個元素。
提示：p:last-child 等同于 p:nth-last-child(1)。
eg：指定屬于其父元素的最后一個子元素的 p 元素的背景色：
p:last-child
{
background:#ff0000;
}
這是標題
第一個段落。
第二個段落。
第三個段落。
第四個段落。
第五個段落。
效果：
說明：p標簽的父元素是body，body標簽中最后一個p元素是第五個段落
:nth-child():nth-child() 選擇器，該選擇器選取父元素的第 N 個子元素，與類型無關(guān)。
p:nth-child(2)
{
background:#ff0000;
}
:nth-child()的詳細用法這是標題
第一個段落。
第二個段落。
第三個段落。
第四個段落。
注釋：Internet Explorer 不支持 :nth-child() 選擇器。
nth-child(3) 表示選擇列表中的第三個元素。
nth-child(2n)表示列表中的偶數(shù)標簽，即選擇第2、第4、第6……標簽
nth-child(2n-1) 表示選擇列表中的奇數(shù)標簽，即選擇 第1、第3、第5、第7……標簽
nth-child(n+3) 表示選擇列表中的標簽從第3個開始到最后（>=3）
nth-child(-n+3) 表示選擇列表中的標簽從0到3，即小于3的標簽(<=3)
nth-last-child(3) 表示選擇列表中的倒數(shù)第3個標簽
:nth-of-type(n):nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素.
n 可以是數(shù)字、關(guān)鍵詞或公式。
p:nth-of-type(2)
{
background:#ff0000;
}
這是標題
第一個段落。
測試第二個段落。
第三個段落。
第四個段落。
第五個段落。
效果圖：
:nth-last-child() 選擇器:nth-last-child(n) 選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。
n 可以是數(shù)字、關(guān)鍵詞或公式。
提示：請參閱 :nth-last-of-type() 選擇器，該選擇器選取父元素的第 N 個指定類型的子元素，從最后一個子元素開始計數(shù)。
CSS3 :not 選擇器:not(selector) 選擇器匹配非指定元素/選擇器的每個元素。
更多css選擇器請參考：CSS 選擇器參考手冊
http://www.w3school.com.cn/cs...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53005.html
摘要：前言我們在碼代碼的時候，經(jīng)常會遇到需要給第一個或者最后一個元素添加或刪除樣式，還有一些比較特殊的是選取第幾個元素添加或刪除樣式，下面記錄選擇器中常見的選擇器相鄰兄弟選擇器子選擇器兄弟選擇器的用法。 前言：我們在碼代碼的時候，經(jīng)常會遇到需要給第一個或者最后一個元素添加或刪除樣式，還有一些比較特殊的是選取第幾個元素添加或刪除樣式，下面記錄css選擇器中常見的選擇器:相鄰兄弟選擇器（+）、子...
摘要：代表的上下文對象是一個的上下文對象，可以調(diào)用的方法和屬性值特殊選擇器點擊測試通過原生處理點擊測試通過原生處理直接通過的方法改變顏色通過包裝成對象改變顏色 DOM對象轉(zhuǎn)化成jQuery對象 如果傳遞給$(DOM)函數(shù)的參數(shù)是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象 元素一 元素二 元素三 var ...
摘要：選擇器選擇器是什么的選擇器是用于定位頁面中的元素，其用法最初設(shè)計是源于的選擇其用法，但是的選擇器進行了擴展，遠比的選擇器更加強大。 選擇器 選擇器是什么 jQuery的選擇器是用于定位HTML頁面中的元素，其用法最初設(shè)計是源于CSS的選擇其用法，但是jQuery的選擇器進行了擴展，遠比CSS的選擇器更加強大。 基本選擇器 基本選擇去具有以下幾種：1.ID選擇器 2.元素選擇器3...
摘要：選擇器選擇器是什么的選擇器是用于定位頁面中的元素，其用法最初設(shè)計是源于的選擇其用法，但是的選擇器進行了擴展，遠比的選擇器更加強大。 選擇器 選擇器是什么 jQuery的選擇器是用于定位HTML頁面中的元素，其用法最初設(shè)計是源于CSS的選擇其用法，但是jQuery的選擇器進行了擴展，遠比CSS的選擇器更加強大。 基本選擇器 基本選擇去具有以下幾種：1.ID選擇器 2.元素選擇器3...
摘要：架構(gòu)基本選擇器元素選擇器通過元素名稱定位頁面元素類選擇器通過元素的屬性定位頁面元素選擇器通過元素的屬性定位頁面元素屬性必須是唯一的通配符選擇器匹配當前頁面中所有元素元素選擇器通過元素名稱定位頁面元素定位頁面中一類元素選擇器通過元素的屬性定位 CSS架構(gòu) 基本選擇器 元素選擇器:通過元素名稱定位頁面元素 類選擇器:通過元素的class屬性定位頁面元素 ID選擇器:通過元素的ID屬性定位...
閱讀 3226·2021-10-13 09:40
閱讀 3688·2019-08-30 15:54
閱讀 1309·2019-08-30 13:20
閱讀 2993·2019-08-30 11:26
閱讀 475·2019-08-29 11:33
閱讀 1099·2019-08-26 14:00
閱讀 2356·2019-08-26 13:58
閱讀 3366·2019-08-26 10:39
