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