|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
三種在CSS中排除(不選擇)第一個(gè)子標(biāo)簽的方法
作者:admin 時(shí)間:2022-9-10 16:39:51 瀏覽:當(dāng)你的頁面上有很多內(nèi)容，并且需要選擇幾個(gè)元素時(shí)，那么你應(yīng)該使用 CSS 選擇器。在 CSS 中，各種選擇器將幫助你從元素組中選擇特定項(xiàng)目。
在這篇文章中，我們將介紹如何在 CSS 中排除第一個(gè)子標(biāo)簽。
在 CSS 中，要排除第一個(gè)子標(biāo)簽，可以使用給定的選擇器：
- :not(:first-child)
- :not(:nth-of-type(1))
- :not(:first-of-type)
方法一：使用 :not(:first-child) 排除第一個(gè)子標(biāo)簽
:not(:first-child) 選擇器定義了不選擇父標(biāo)簽的第一個(gè)子標(biāo)簽的規(guī)則。這個(gè)選擇器將幫助我們排除第一個(gè)元素應(yīng)用的 CSS 樣式。
讓我們舉一個(gè)簡單的例子，學(xué)習(xí)如何應(yīng)用選擇器來不選擇第一個(gè)子標(biāo)簽。
例子
這是我們頁面上的三個(gè)具有綠色的錨文本。讓我們只為第一個(gè)文本元素排除綠色：
我們在HTML 文件的<body>中指定了錨標(biāo)記 <a> ：
<a>我的第一個(gè)鏈接</a> <br> <a>我的第二個(gè)鏈接</a> <br> <a>我的第三個(gè)鏈接</a> _ _ _ _
接下來，在樣式表中使用父標(biāo)簽 body 和子標(biāo)簽 a 以及 :not(:first-child)) 選擇器。然后，添加值為“green”的CSS color 屬性；顏色將應(yīng)用于除第一個(gè)子元素之外的所有元素：
<style>
body a:not(:first-child){
color: green;
}
</style>
現(xiàn)在，保存添加的代碼并在瀏覽器中簡單地打開它。
如你所見，我們只將顏色應(yīng)用于除第一個(gè)元素之外的所有元素：
方法 2：使用 :not(:nth-of-type(1)) 不選擇第一個(gè)子標(biāo)簽
:not(:nth-of-type()) 選擇器允許你選擇序列中的一個(gè)或多個(gè)元素。如果只使用 (:nth-of-type(1)) ，選擇器將選擇第一個(gè)子元素；但是，當(dāng) :not 放在它前面時(shí)，第一個(gè)元素將被排除在外。
讓我們使用以下示例清楚 :not(:nth-of-type(1)) 概念。
例子
在這里，我們將設(shè)置 :not(:nth-of-type(1)) 選擇器，其中“1”表示將排除第一個(gè)子元素。接下來，為 color 屬性賦值 orange：
<style>
body a:not(:nth-of-type(1)) {
color: orange;
}
</style>
輸出
方法 3：使用 :not(:first-of-type) 不選擇第一個(gè)子標(biāo)簽
(:first-of-type) 選擇器將匹配一個(gè)元素的第一次出現(xiàn)，并在其后面添加 :not 作為 :not(:first-of-type) 以跳過第一次出現(xiàn)。
例子
在此示例中，將應(yīng)用 :not(:first-of-type) 選擇器來排除其父項(xiàng)的第一個(gè)子項(xiàng)。然后，為color屬性設(shè)置值blue：
<style>
body a:not(:first-of-type) {
color: blue;
}
</style>
輸出
總結(jié)
要不選擇第一個(gè)子標(biāo)簽，請使用 :not(:first-child) 、:not(:nth-of-type(1)) 或 :not(:first-of-type) 選擇器。如果不使用 :not，這些選擇器將只選擇第一個(gè)子元素并跳過其他子元素。但是，當(dāng) :not 放在這些選擇器之前時(shí)，它將被綁定只跳過其父級的第一個(gè)子級。在這篇文章中，我們介紹了三種在 CSS 中不選擇第一個(gè)子標(biāo)簽的有效方法。
相關(guān)文章
- [實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫
- [示例]如何使用CSS將文本環(huán)繞在圖像周圍
- [3示例]如何用CSS實(shí)現(xiàn)文本環(huán)繞圖像
- 純CSS實(shí)現(xiàn)水平(橫向)滾動(dòng)列表
- CSS如何創(chuàng)建淡入背景動(dòng)畫
- 如何為圖像、按鈕和文本在懸停時(shí)添加淡入過渡效果
- CSS為文本添加fade-in淡入動(dòng)畫效果
- css實(shí)現(xiàn)圖片fade-in淡入動(dòng)畫效果
- 如何使用CSS在圖像頂部疊加圖標(biāo)
- CSS實(shí)現(xiàn)圓圈內(nèi)含有文字并居中【實(shí)例】
- 無JS，純HTML+CSS實(shí)現(xiàn)的表單驗(yàn)證
- 如何用CSS把背景分為2種顏色
- 實(shí)例演示CSS Inline與inline-block的區(qū)別
- [CSS]防止移動(dòng)端放大屏幕時(shí)文字換行溢出的方法
- 以前的失效了,最新CSS識別Chrome、Firefox、IE11代碼
- CSS類不起作用？id、類名、標(biāo)簽選擇器的優(yōu)先分析
- 4個(gè)實(shí)例演示——美化表單input輸入框CSS樣式
- 6款CSS性能檢測、審計(jì)(audit)工具
- 4款CSS 3D按鈕點(diǎn)擊過渡效果
- 純CSS實(shí)現(xiàn)具有漸變和圓角的彩色邊框
標(biāo)簽: css 子標(biāo)簽 first-child first-of-type
- [實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫
- [示例]如何使用CSS將文本環(huán)繞在圖像周圍
- [3示例]如何用CSS實(shí)現(xiàn)文本環(huán)繞圖像
- 純CSS實(shí)現(xiàn)水平(橫向)滾動(dòng)列表
- CSS如何創(chuàng)建淡入背景動(dòng)畫
- 如何為圖像、按鈕和文本在懸停時(shí)添加淡入過渡效果
- CSS為文本添加fade-in淡入動(dòng)畫效果
- css實(shí)現(xiàn)圖片fade-in淡入動(dòng)畫效果
- 如何使用CSS在圖像頂部疊加圖標(biāo)
- CSS實(shí)現(xiàn)圓圈內(nèi)含有文字并居中【實(shí)例】
- 無JS，純HTML+CSS實(shí)現(xiàn)的表單驗(yàn)證
- 如何用CSS把背景分為2種顏色
- 實(shí)例演示CSS Inline與inline-block的區(qū)別
- [CSS]防止移動(dòng)端放大屏幕時(shí)文字換行溢出的方法
- 以前的失效了,最新CSS識別Chrome、Firefox、IE11代碼
- 站長推薦
