整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS怎么选择除了第一个子元素外的其余同级子元素

SS怎么选择除了第一个子元素外的其余同级子元素

使用 CSS 的:not()伪类选择器和:nth-child()伪类选择器

要通过CSS的代码选择某一个元素的除了第一个子元素外的其余的跟第一个子元素同级的子元素，可以结合使用CSS的:not()伪类选择器和:nth-child()伪类选择器进行选择。大致的语法如下：

.parent > .child:not(:nth-child(1)) {样式设置}

CSS选择除了第一个子元素外同级子元素实例代码，及在线编辑器

下面的实例中除了使用上述的两种伪类选择器之外，还结合了class属性：

<div class='p'>
  <div class='c'>p的第一个子元素</div>
  <div class='c'>p的第二个子元素</div>
  <div class='c'>p的第三个子元素</div>
</div>


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

原文及在线编辑器：CSS怎么选择除了第一个子元素外的其余同级子元素 | CSS教程

过css类选取元素

html所有的元素拥有class属性，该属性会对元素进行分组，标识为某一组。

js中使用className属性来保存HTML的class的属性值

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

尽管如此，js还定义了一个方法，即一个getElementsByClassName()，是基于class属性值中的标识符来选取成组的文档元素

还有一个类似的getElementsByTagName()的方法也是获取一个组，返回的是一组的内容即NodeList。返回的是类数组。

一个使用getElementsByClassName()的例子

  1. // 查找其class属性值中包含warning的所有元素
  2. var warnings = document.getElementsByClassName("warning");
  3. // 查找以log命名并且含有error和fatal类的元素的所有后代
  4. var log = document.getElementById("log");
  5. var fatal = log.getElementByClassName("fatal error"); // 先获取id为log，在获取class为fatal error的元素

一个兼容，浏览器根据！doctype来进行选择怪异模式，和标准模式的，怪异模式是为了向后兼容而存在的，标准模式不是（兼容以及不太重要了，但是还要知道一点，这是ie8的问题，但愿再过几年直接win7也没有了）

通过css选择器选择元素

css样式表可以进行选择，这里仅仅是一些常见的css选择器

  1. #nav // id = nav 的元素
  2. div // 选择div元素
  3. .warning // 选择class属性为waring的元素
  4. // 基于属性值选取元素
  5. p[lang="fr"] // 所有语言为fr的元素
  6. *[name="x"] // 所有包含name="x"的属性的元素
  7. // 将选择器进行组合使用
  8. span.fatal.error // 选择class中包含fatal和error的span元素
  9. span[lang="fr"].warning // 所有使用法语，并且class中包含warning的span元素
  10. // 选择器指定文档结构
  11. #log span // id 为log元素的后代元素中的所有的span元素
  12. #log > span // id 为log元素的子元素中所有的span元素
  13. body>h1:first-child // <body>的子元素中的第一个<h1>元素
  14. // 选择器组合选择多个或者组合元素
  15. div, #log // 所有的div元素，以及id为log的元素属于和关系
  16. // 正则选择器
  17. a[src^="https"] // 选择src属性为https开头的
  18. a[src$=".pdf"] // 匹配src属性为.pdf结尾的元素
  19. a[src*="ming"] // 匹配src中包含ming的元素

h5定义了一些选择api用来通过js来选择元素

  1. document.querySelector("title")

选择title元素

  1. document.querySelectorAll("title")

会返回一个类数组的 节点列表

  1. document.querySelector(":first-line")

选择一个伪元素，在css中匹配了节点一部分，而不是实际元素。

其中querySelector只会返回匹配的第一个结果，querySelectorAll将会返回全部结果，返回一个类数组。

  1. document.querySelector(":link")

返回一个页面上未访问的连接

  1. document.querySelectorAll(":visited")

选择一个已经访问过的，用来获取用户在该页面的一部分的历史记录

document.all[]

已经废弃，不在使用，所以不学习

文档结构和遍历

一旦从文档中选取了一个元素，将会需要查找文档与之在结构上相关的部分，（即，父元素，子元素，兄弟元素）。温带在概念上为节点对象树。浏览器定义了一个api将会对元素对象树进行遍历

作为节点树的文档

Document对象，以及Element对象和文档中表示文本的Text对象都为Node对象，Node对象定义了一下重要的属性。

parentNode

获取该节点的父节点

childNode

只读类型数组对象（NodeList对象），它是该节点的子节点的实时表示

firstChild， lastChild

该节点的子节点中的第一个和最后一个

nextSibling，previousSibling

该节点的兄弟节点中的前一个和下一个

nodeType

该节点的类型

一些类 继承（基类，父类，超类），派生类，子类

这里以c++为栗子 ：基类，父类，超类，指被继承的类，派生类，子类指继承于基类的类，在C++中冒号表示继承，入classA：public：B 表示派生类A从基类B继承而来。派生类包含基类的所有成员，还包括自身的特有成员，由于继承关系的存在，派生类和派生类对象访问基类中的成员就像访问自己的成员一样。可以直接使用，但是派生类，仍旧无法访问基类中的私有成员。C++派生类可以同时从多个基类继承，java不允许多重继承，当继承多个基类的时候，使用，运算符将基类进行分开。

Element

Element是一个通用的基类，所有的Document都继承自Element

例如

  1. <p>

属于一个由Element基类继承的Document的一个节点

text节点

文字内容，即匿名文字所成的节点。

Comment节点

属于注释的节点

  1. <!-- 这是注释内容 -->

Document 节点

一个已经加载好的网页，并通过入口来操作网页的内容

DocumentType节点

一个声明节点

DocumentFragment 节点

表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用

nodeValue

text节点或者Comment节点文本内容

nodeName

元素的标签名，以大写输出

一个栗子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. hello word
  8. </body>
  9. </html>

控制台输入

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

返回

  1. #text

表示

  1. <body>之前的导致换行符

该html

  1. <!DOCTYPE html><html><head><title></title></head>
  2. <body>hello word</body></html>

继续重新加载，重新输入

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

继续去掉唯一的换行符

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

继续在控制台输入

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

返回body

说明是换行符的问题导致

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文档（回车，空格，以及注释节点）

Element的children属性

第一部分是Element（通用基类）的children属性，类似于childNodes属于一个NodeList对象，不同的是children列表只包含Element对象，text和Comment节点没有children属性，任何的Element的parentNode（父节点）都是另一个Element，或者是树根的Document节点

Element的属性

firstElementChild，lastElementChild

类似firstChild和lastChild，只代表子Element

nextElementSibling，previousElementSibling

类似的nextSibling和previousSibling 代表兄弟节点

childElementCount

子元素的数量，和children。length的值相等

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

页面布局常遇见需要子元素完全居中显示，因此在此总结常见方案。

让黄色块在父容器（灰色块）中水平、垂直居中

黄色方块：宽高100px

灰色方块：宽高400px

下列方法1到方法7，变换前后的图像都是上面2张图（图标注了长度）

默认代码：

 <!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代码都是基于上方默认代码

方法1：弹性布局+主/侧轴中间对齐

 .parent {
     /* 弹性布局 */
     display: flex;
     /* 主轴对齐方式：居中 */
     justify-content: center;
     /* 侧轴对齐方式（单行）：居中 */
     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：直接计算

分析过程：使用外边距推中间黄色盒子，距离顶端（400-100）/2= 150 px

 .parent {
     /* 因为margin塌陷问题（子容器的外边距会被父容器用掉）：此处需要显示指明父容器溢出方式 */
     overflow: auto;
 }
 
 .children {
     /* 上下150px，左右自动 */
    margin: 150px auto;
 }

方法5： Transform属性

这种方法使用CSS的transform和position属性。这种方法在某些情况下可能比Flexbox或Grid更简单：

  .children {
     position: relative;
     left: 50%;
     top: 50%;
      /* 
      transform：2/3D变换关键字
      translate是2D位移关键字
         x与y都-50%，是因为坐标原点默认是左上角，在left与top移动50%后，黄色盒子处于中心点右下方，因此需要让黄色盒子xy都减去一半
      */
     transform: translate(-50%, -50%);
 }

方法6：Grid布局

CSS Grid也是一个强大的布局工具，它也可以用来实现子元素的水平和垂直居中。以下是一个例子：

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

方法7：使用表格布局

通过display设置为table-cell，然后使用text-align 、vertical-align实现水平居中和垂直居中。

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

方法8：变化成行内块

若父元素宽高确定，子元素宽高不确定，用

将children设为行内元素，运用text-align即可实现水平居中，再借助vertical-align在垂直方向上达到居中效果。最后，将children的行高设定为默认值（line-height具有可继承性，需单独调整子元素的行高）。

 <!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>

初始

居中

更多精彩，请关注微信公众号：码圈小橙子


在线咨询
上一篇：为什么我推荐使用JSX开发Vue3
下一篇：3行css实现循环动画，顺便说说浏览器兼容性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 萨嘎县 涞水县 滕州 道县 得荣县 安陆市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服