css3有没有除第一个子元素以外的元素的选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3有没有除第一个子元素以外的元素的选择器相关的知识,希望对你有一定的参考价值。

有的,包括:“:not(:first-child)”、“:nth-child(n+2)”两种方式。

1、:not(:first-child):其中,E:not(s)表示匹配所有不匹配简单选择符s的元素E,E:first-child匹配同级兄弟元素中的第一个E元素。

2、:nth-child(n+2):其中nth-child表示第几个son,n+2表示从第二个开始(即所有的n都是取从0开始的自然数)。

扩展资料:

css3中相关的选择器:

1、E:root :匹配文档的根元素。在html(标准通用标记语言下的一个应用)中,根元素永远是HTML

2、E:nth-child(n):匹配父元素中的第n个子元素E

3、E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E

4、E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E

5、E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E

6、E:last-child:匹配父元素中最后一个E元素

7、E:first-of-type:匹配同级兄弟元素中的第一个E元素

8、E:only-child:匹配属于父元素中唯一子元素的E

9、E:only-of-type:匹配属于同类型中唯一兄弟元素的E

参考资料来源:百度百科-css3

参考技术A :nth-child(n+2)
其中nth-child表示第几个son,n+2表示从第二个开始(即所有的n都是取从0开始的自然数)
比如除去最后一个可以写作
:nth-last-child(n+2)
参考技术B :not(:first-child)追答

父元素跟答案之间要有空格,如 div :not(:first-child)

参考技术C :nth-child(n+1) 参考技术D 是没有的,只要js可以做。

希望我的回答可以帮到你,有什么不懂可以追问。本回答被提问者采纳

CSS基础

1.结构伪类选择器

span:first-child 选择span元素的父元素中的第一个子元素,第一个子元素还必须得是span标签

span:last-child 选择span元素的父元素中的最后一个子元素,最后一个子元素还必须得是span标签

span:nth-child(n) 选择span元素的父元素中的第n个子元素,第n个子元素还必须得是span标签 注意是从前面开始查找

span:nth-last-child(n) 选择span元素的父元素中的第n个子元素,第n个子元素还必须得是span标签 注意是从后面开始查找

凡是涉及到n的操作,n的取值都可以从0开始,可以取0,1,2,3,4,5,6,7,8,9...

span:nth-child(2n) 原理同上,是取偶数行

span:nth-child(2n+1) 原理同上,是取奇数行

span:nth-child(even) 原理同上,是取偶数行

span:nth-child(odd) 原理同上,是取奇数行

 

2.目标伪类选择器 :target

获取被选中的那个元素

 

3.盒子模型

在网页布局当中为了页面的稳定,美观,以及维护的方便,我们是将每一个标签都看成是一个盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

盒模型的组成:border + content + padding + margin

 

3.1盒子模型中的边框 border

border: border-width || border-style || border-color

border: 1px solid red; 最最常用的一种写法

 

3.2内填充padding

边框(border)和内容(content)之间的空间为内填充,也就是padding

padding的不同写法:

padding: 30px; 只有一个值的时候,表示四个方向都是同一个值

padding: 30px 70px; 两个值的时候,第一个值表示上下,第二个值表示右左。

padding: 20px 50px 80px; 三个值的时候,第一个值表示上,第二个值表示右左,第三个值表示下。

padding: 20px 50px 80px 120px; 四个值的时候,表示上右下左。

 

3.3盒子面积的影响因素

当一个盒子的宽和高设置了之后,如果再加上border或是padding的话,会影响当前盒子原来的面积

如果想保持当前的面积不变的话,需要在内容的宽度上将多出来的值给减掉。

 

3.4外填充margin

边框border之外的空间,或是盒子与盒子之间的距离就是margin

margin的不同写法:

margin: 30px; 只有一个值的时候,表示四个方向都是同一个值

margin: 30px 70px; 两个值的时候,第一个值表示上下,第二个值表示右左。

margin: 20px 50px 80px; 三个值的时候,第一个值表示上,第二个值表示右左,第三个值表示下。

margin: 20px 50px 80px 120px; 四个值的时候,表示上右下左。

 

3.5使用margin设置外边距的时候带来的问题

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)

解决的方式:尽量避免同时在上下两个盒子中都设置了margin-bottom和margin-top

2.父子元素共享margin的问题

当父元素嵌套了一个子元素的时候,如果子元素设置了一个margin-top,则父元素也会有margin-top样式

解决方案:

1.给父元素设置一个边框 border:1px solid red;

2.给父元素添加一个属性 overflow:hidden;

 

4.后代选择器

作用:先限定范围,然后再选择标签对象

从某个范围里面,选择其中的子元素

.box ul li 选择类名为box的元素下面的ul标签下面的所有的li标签

.demo .li2 选取类名为demo的元素下面的类名为li2的所有的标签

.demo li:nth-child(3) 选择类名为demo的元素下面的li标签中的第3个

 

5.浮动float

浮动是用来解决块级元素在一行并列显示的问题,把要在一行显示的块行元素都设置一个属性float:left;

浮动会有贴靠现像,要浮动都浮动,要不浮动都不浮动。

浮动的元素,会盖住下面没有浮动的元素,因为浮动的元素漂起来,不浮动的元素钻到上面那个元素的底下去了。

 

6.CSS3中的盒子模型

为了保证盒子面积始终不变,需要设置一个属性:

box-sizing: border-box; --- content-box是默认的值,css2就一直遵循的这种标准。

 

7.小结

结构伪类:

:first-child

:last-child

:nth-child

:nth-last-child

:target

 

盒子模型的组成:内容 + 内边距 + 外边距 + 边框

conent + padding + margin + border

 

浮动:是用来解决块级元素在一行显示的问题的。

float:left;

后代选择器: .box ul li

css3中的盒子模型: box-sizing: border-box 会让盒子进入内减模式

*margin:0;padding:0 清除标签的默认内外边距

去掉无序列表的小黑点: list-style:none;

 

Emmet语法补充

ul>li这是第$个li标签*6

<ul>
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>
    <li>这是第3个li标签</li>
      <li>这是第4个li标签</li>
      <li>这是第5个li标签</li>
      <li>这是第6个li标签</li>
</ul>

 

w100 h100

.box 
    width: 100px;
    height: 100px;

 

以上是关于css3有没有除第一个子元素以外的元素的选择器的主要内容,如果未能解决你的问题,请参考以下文章

jquery怎么删除第一个子元素

jquery怎么删除第一个子元素

jquery怎么找到元素下面的第一个子元素

选择排序

jquery如何获取第一个子元素

jquery如何获取第一个或最后一个子元素?