CSS怎么選擇除了第一個(gè)子元素外的其余同級子元素

SS怎么選擇除了第一個(gè)子元素外的其余同級子元素

使用 CSS 的:not()偽類選擇器和:nth-child()偽類選擇器

要通過CSS的代碼選擇某一個(gè)元素的除了第一個(gè)子元素外的其余的跟第一個(gè)子元素同級的子元素，可以結(jié)合使用CSS的:not()偽類選擇器和:nth-child()偽類選擇器進(jìn)行選擇。大致的語法如下：

.parent > .child:not(:nth-child(1)) {樣式設(shè)置}

CSS選擇除了第一個(gè)子元素外同級子元素實(shí)例代碼，及在線編輯器

下面的實(shí)例中除了使用上述的兩種偽類選擇器之外，還結(jié)合了class屬性：

<div class='p'>
  <div class='c'>p的第一個(gè)子元素</div>
  <div class='c'>p的第二個(gè)子元素</div>
  <div class='c'>p的第三個(gè)子元素</div>
</div>


<style>
  .p > .c:not(:nth-child(1)){color:green;}
</style>

原文及在線編輯器：CSS怎么選擇除了第一個(gè)子元素外的其余同級子元素 | CSS教程

過css類選取元素

html所有的元素?fù)碛衏lass屬性，該屬性會對元素進(jìn)行分組，標(biāo)識為某一組。

js中使用className屬性來保存HTML的class的屬性值

var NodeList = document.getElementById("first")
close.log(NodeList.class)

盡管如此，js還定義了一個(gè)方法，即一個(gè)getElementsByClassName()，是基于class屬性值中的標(biāo)識符來選取成組的文檔元素

還有一個(gè)類似的getElementsByTagName()的方法也是獲取一個(gè)組，返回的是一組的內(nèi)容即NodeList。返回的是類數(shù)組。

一個(gè)使用getElementsByClassName()的例子

// 查找其class屬性值中包含warning的所有元素
var warnings = document.getElementsByClassName("warning");
// 查找以log命名并且含有error和fatal類的元素的所有后代
var log = document.getElementById("log");
var fatal = log.getElementByClassName("fatal error"); // 先獲取id為log，在獲取class為fatal error的元素

一個(gè)兼容，瀏覽器根據(jù)！doctype來進(jìn)行選擇怪異模式，和標(biāo)準(zhǔn)模式的，怪異模式是為了向后兼容而存在的，標(biāo)準(zhǔn)模式不是（兼容以及不太重要了，但是還要知道一點(diǎn)，這是ie8的問題，但愿再過幾年直接win7也沒有了）

通過css選擇器選擇元素

css樣式表可以進(jìn)行選擇，這里僅僅是一些常見的css選擇器

#nav // id = nav 的元素
div // 選擇div元素
.warning // 選擇class屬性為waring的元素
// 基于屬性值選取元素
p[lang="fr"] // 所有語言為fr的元素
*[name="x"] // 所有包含name="x"的屬性的元素
// 將選擇器進(jìn)行組合使用
span.fatal.error // 選擇class中包含fatal和error的span元素
span[lang="fr"].warning // 所有使用法語，并且class中包含warning的span元素
// 選擇器指定文檔結(jié)構(gòu)
#log span // id 為log元素的后代元素中的所有的span元素
#log > span // id 為log元素的子元素中所有的span元素
body>h1:first-child // <body>的子元素中的第一個(gè)<h1>元素
// 選擇器組合選擇多個(gè)或者組合元素
div, #log // 所有的div元素，以及id為log的元素屬于和關(guān)系
// 正則選擇器
a[src^="https"] // 選擇src屬性為https開頭的
a[src$=".pdf"] // 匹配src屬性為.pdf結(jié)尾的元素
a[src*="ming"] // 匹配src中包含ming的元素

h5定義了一些選擇api用來通過js來選擇元素

document.querySelector("title")

選擇title元素

document.querySelectorAll("title")

會返回一個(gè)類數(shù)組的節(jié)點(diǎn)列表

document.querySelector(":first-line")

選擇一個(gè)偽元素，在css中匹配了節(jié)點(diǎn)一部分，而不是實(shí)際元素。

其中querySelector只會返回匹配的第一個(gè)結(jié)果，querySelectorAll將會返回全部結(jié)果，返回一個(gè)類數(shù)組。

document.querySelector(":link")

返回一個(gè)頁面上未訪問的連接

document.querySelectorAll(":visited")

選擇一個(gè)已經(jīng)訪問過的，用來獲取用戶在該頁面的一部分的歷史記錄

document.all[]

已經(jīng)廢棄，不在使用，所以不學(xué)習(xí)

文檔結(jié)構(gòu)和遍歷

一旦從文檔中選取了一個(gè)元素，將會需要查找文檔與之在結(jié)構(gòu)上相關(guān)的部分，（即，父元素，子元素，兄弟元素）。溫帶在概念上為節(jié)點(diǎn)對象樹。瀏覽器定義了一個(gè)api將會對元素對象樹進(jìn)行遍歷

作為節(jié)點(diǎn)樹的文檔

Document對象，以及Element對象和文檔中表示文本的Text對象都為Node對象，Node對象定義了一下重要的屬性。

parentNode

獲取該節(jié)點(diǎn)的父節(jié)點(diǎn)

childNode

只讀類型數(shù)組對象（NodeList對象），它是該節(jié)點(diǎn)的子節(jié)點(diǎn)的實(shí)時(shí)表示

firstChild， lastChild

該節(jié)點(diǎn)的子節(jié)點(diǎn)中的第一個(gè)和最后一個(gè)

nextSibling，previousSibling

該節(jié)點(diǎn)的兄弟節(jié)點(diǎn)中的前一個(gè)和下一個(gè)

nodeType

該節(jié)點(diǎn)的類型

一些類繼承（基類，父類，超類），派生類，子類
這里以c++為栗子：基類，父類，超類，指被繼承的類，派生類，子類指繼承于基類的類，在C++中冒號表示繼承，入classA：public：B 表示派生類A從基類B繼承而來。派生類包含基類的所有成員，還包括自身的特有成員，由于繼承關(guān)系的存在，派生類和派生類對象訪問基類中的成員就像訪問自己的成員一樣。可以直接使用，但是派生類，仍舊無法訪問基類中的私有成員。C++派生類可以同時(shí)從多個(gè)基類繼承，java不允許多重繼承，當(dāng)繼承多個(gè)基類的時(shí)候，使用，運(yùn)算符將基類進(jìn)行分開。

Element

Element是一個(gè)通用的基類，所有的Document都繼承自Element

例如

屬于一個(gè)由Element基類繼承的Document的一個(gè)節(jié)點(diǎn)

text節(jié)點(diǎn)

文字內(nèi)容，即匿名文字所成的節(jié)點(diǎn)。

Comment節(jié)點(diǎn)

屬于注釋的節(jié)點(diǎn)

Document 節(jié)點(diǎn)

一個(gè)已經(jīng)加載好的網(wǎng)頁，并通過入口來操作網(wǎng)頁的內(nèi)容

DocumentType節(jié)點(diǎn)

一個(gè)聲明節(jié)點(diǎn)

DocumentFragment 節(jié)點(diǎn)

表示一個(gè)沒有父級文件的最小文檔對象。它被當(dāng)做一個(gè)輕量版的 Document 使用

nodeValue

text節(jié)點(diǎn)或者Comment節(jié)點(diǎn)文本內(nèi)容

nodeName

元素的標(biāo)簽名，以大寫輸出

一個(gè)栗子

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
hello word
</body>
</html>

控制臺輸入

document.childNodes[1].childNodes[2].childNode[0]

#text

表示

<body>之前的導(dǎo)致?lián)Q行符

該html

<!DOCTYPE html><html><head><title></title></head>
<body>hello word</body></html>

繼續(xù)重新加載，重新輸入

document.childNodes[1].childNodes[1]
#text

繼續(xù)去掉唯一的換行符

<!DOCTYPE html><html><head><title></title></head><body>hello word</body></html>

繼續(xù)在控制臺輸入

document.childNodes[1].childNodes[1]
<body style>?…?</body>?

返回body

說明是換行符的問題導(dǎo)致

https://stackoverflow.com/questions/45614337/what-causes-childnodes-to-return-text-instead-of-div

https://stackoverflow.com/questions/21357004/what-are-html-dom-text-elements

作為元素樹的文檔

將文檔看成Element對象樹，忽視部分文檔，text和comment文檔（回車，空格，以及注釋節(jié)點(diǎn)）

Element的children屬性

第一部分是Element（通用基類）的children屬性，類似于childNodes屬于一個(gè)NodeList對象，不同的是children列表只包含Element對象，text和Comment節(jié)點(diǎn)沒有children屬性，任何的Element的parentNode（父節(jié)點(diǎn)）都是另一個(gè)Element，或者是樹根的Document節(jié)點(diǎn)

Element的屬性

firstElementChild，lastElementChild

類似firstChild和lastChild，只代表子Element

nextElementSibling，previousElementSibling

類似的nextSibling和previousSibling 代表兄弟節(jié)點(diǎn)

childElementCount

子元素的數(shù)量，和children。length的值相等

例一：子元素水平垂直居中

頁面布局常遇見需要子元素完全居中顯示，因此在此總結(jié)常見方案。

讓黃色塊在父容器（灰色塊）中水平、垂直居中

黃色方塊：寬高100px
灰色方塊：寬高400px

下列方法1到方法7，變換前后的圖像都是上面2張圖（圖標(biāo)注了長度）

默認(rèn)代碼：

 <!DOCTYPE html>
 <html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
     <title>完全居中</title>
     <style>
         .parent {
             width: 400px;
             height: 400px;
             background-color: gray;
         }
 
         .children {
             width: 100px;
             height: 100px;
             background-color: yellow;
         }
     </style>
 </head>
 
 <body>
     <div class="parent">
         <div class="children"></div>
     </div>
 </body>
 </html>

下列方法1到方法7，里css代碼都是基于上方默認(rèn)代碼

方法1：彈性布局+主/側(cè)軸中間對齊

 .parent {
     /* 彈性布局 */
     display: flex;
     /* 主軸對齊方式：居中 */
     justify-content: center;
     /* 側(cè)軸對齊方式（單行）：居中 */
     align-items: center;
 }

方法2：彈性布局+margin自動

 .parent {
     /* 彈性布局 */
     display: flex;
 }
 .children {
     margin: auto;
 }

方法3：定位（子絕父相）+margin

 .parent {
     position: relative;
 }
 
 .children {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
 }

方法4：直接計(jì)算

分析過程：使用外邊距推中間黃色盒子，距離頂端（400-100）/2= 150 px

 .parent {
     /* 因?yàn)閙argin塌陷問題（子容器的外邊距會被父容器用掉）：此處需要顯示指明父容器溢出方式 */
     overflow: auto;
 }
 
 .children {
     /* 上下150px，左右自動 */
    margin: 150px auto;
 }

方法5： Transform屬性

這種方法使用CSS的transform和position屬性。這種方法在某些情況下可能比Flexbox或Grid更簡單：

  .children {
     position: relative;
     left: 50%;
     top: 50%;
      /* 
      transform：2/3D變換關(guān)鍵字
      translate是2D位移關(guān)鍵字
         x與y都-50%，是因?yàn)樽鴺?biāo)原點(diǎn)默認(rèn)是左上角，在left與top移動50%后，黃色盒子處于中心點(diǎn)右下方，因此需要讓黃色盒子xy都減去一半
      */
     transform: translate(-50%, -50%);
 }

方法6：Grid布局

CSS Grid也是一個(gè)強(qiáng)大的布局工具，它也可以用來實(shí)現(xiàn)子元素的水平和垂直居中。以下是一個(gè)例子：

 .parent {
     display: grid;
     justify-items: center;/* 水平居中 */
     align-items: center;/* 垂直居中 */
 }

方法7：使用表格布局

通過display設(shè)置為table-cell，然后使用text-align 、vertical-align實(shí)現(xiàn)水平居中和垂直居中。

 .parent {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 }
 
 .children {
     display: inline-block;
 }

方法8：變化成行內(nèi)塊

若父元素寬高確定，子元素寬高不確定，用

將children設(shè)為行內(nèi)元素，運(yùn)用text-align即可實(shí)現(xiàn)水平居中，再借助vertical-align在垂直方向上達(dá)到居中效果。最后，將children的行高設(shè)定為默認(rèn)值（line-height具有可繼承性，需單獨(dú)調(diào)整子元素的行高）。

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <title>完全居中</title>
     <style>
         .parent {
             width: 400px;
             height: 400px;
             background-color: gray;
             text-align: center;
             line-height: 400px;
         }
          
         .children {
             background-color: yellow;
             display: inline-block;
             vertical-align: middle;
             line-height: initial;
         }
     </style>
 </head>
 
 <body>
     <div class="parent">
         <div class="children">child</div>
     </div>
 </body>
 </html>

初始

居中

更多精彩，請關(guān)注微信公眾號：碼圈小橙子

在線咨詢

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商