还在对first-child 、last-child、nth-child(n)、nth-last-child(n) 傻傻搞不清？仔细看看吧。

首先这几个选择器，都是要用标签名称加冒号才有效果的，不可以用class的值加冒号来使用, 例如 p:first-child{} div:last-child{} 是有效的，

对于如下代码：

<body><div   class="abc"><div>123</div><div>456</div></div><div   class="xyz"><div>789</div><div>zzz</div></div>
</body>

.abc:first-child{} 这种写法是无效的，冒号前面必须是标签名称，

但是 .abc div:first-child{} 这个是可以的，满足冒号前面是标签名，

.abc 只是限定了仅仅对 .abc范围内的div起作用，不加.abc就是对body内所有div有效

一，first-child

1.1 div:first-child{}

表示对body内所有div而言，只要某个div相对于它的父元素来说是第一个子节点且是div即可被选中，代码如下：

    <head><style>div{border: 1px solid black;width: 100px;margin: 10px;}div:first-child{border: 1px solid red;}</style></head><body><div class="abc"><div>123</div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>

运行效果如下：

即<div class="abc"> 、 <div>123</div> 以及 <div>789</div> 这3个div都会被选中,

对于abc这个div而言，它的父元素是body，而abc正好是body的第一个子元素，因此满足，

而xyz是body的第二个子元素则不满足；

对于123这个div而言，它的父元素是abc，而123正好是abc的第一个子元素，因此满足，

而456是abc的第二个子元素则不满足；

同理对于789这个div而言，它的父元素是xyz，而789正好是xyz的第一个子元素，因此满足，

而zzz是xyz的第二个子元素则不满足

1.2 ，如果改为 .abc div:first-child{} ，

效果如下：

因为已经限定只作用于 .abc内的div, 而.abc 内部的第一个div就是123；

当有多级子元素，如何只选中第一级子元素？

比如123的内部还有两个div, 代码如下，怎样只选中123这一级，而不选中123内部的div?

    <head><style>div{border: 1px solid black;width: 100px;margin: 10px;}div:first-child{border: 1px solid red;}</style></head><body><div class="abc"><div>123<div>123的内部1</div><div>123的内部2</div></div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>

应使用 .abc > div:first-child {} , 重点就是这个大于号，大于号表示只选下一级，而不选下一级中的子集

1.3 如果第一个元素不是div元素呢？

比如在abc的上面再加一个p标签，如下：

    <head><style>div{border: 1px solid black;width: 100px;margin: 10px;}div:first-child{border: 1px solid red;}</style></head><body><p>我是body的第一个元素，但我不是div</p><div class="abc"><div>123</div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>

效果如下：

由于body的第一个元素是p而不是div，因此abc这个div并未被选中，只选中了123和789，因为他们相对于各自的父元素来说是第一个子元素而且标签名是div

二，last-child

2.1 div:last-child{}

表示对body内所有div而言，只要某个div相对于它的父元素来说是最后一个子元素且是div即可被选中。

    <head><style>div{border: 1px solid black;width: 100px;margin: 10px;}div:last-child{border: 1px solid red;}</style></head><body><div class="abc"><div>123</div><div>456</div></div><div class="xyz"><div>789</div><div>zzz</div></div></body>

效果如下：

456是abc的最后一个子元素且标签名是div， xyz是body的最后一个子元素且标签名是div，zzz是xyz的最后一个子元素且标签名是div

2.2, .abc div:last-child{}

只作用于abc内部；

三，nth-child(n) 和 nth-last-child(n)

是为了弥补 firtst-child 和 last-child 的局限性，因为他们只能针对第一个元素和最后一个元素，如果我想针对第二个元素怎么办？针对第三个元素怎么办？针对第四个元素怎么办.......

所以搞出了这个nth-child(n) 和 nth-last-child(n),

nth-child(n)表示从前往后数，第n个元素；

nth-last-child(n) 表示从后往前数，第n个元素；

① n 可以写成一个数字，如

div:nth-child(1) {} 表示从前往后数的第一个子元素, 也就等同于 div:first-child{}

div:nth-child(2) {} 表示从前往后数的第二个子元素，

div:nth-last-child(2){} 表示从后往前数的第二个元素；

② n 可以写成 odd 或者 even

odd 是奇数，even是偶数

div:nth-first(odd){} 表示从前往后数，顺序排在基数位上的元素, 即第1,3,5,7,9...... 的元素;

div:nth-first(even) {} 表示从前往后数，顺序排在偶数位上的元素, 即第2,4,6,8,10...... 的元素;

div:nth-last-child(even)()表示从后往前数，顺序排在偶数位上的元素,;

③ n可以写成 2n, 3n ， 2n+1 这种形式：

div:nth-child(2n) {} 表示从前往后数, 2的倍数的元素，即第2,4,6,8,10...... 的元素;

div:nth-child(3n) {} 表示从前往后数, 3的倍数的元素，即第3,6,9,12 ...... 的元素, 比如写九宫格时，每行3个元素，给每个元素设置一个margin-right, 但是第3列的元素要消除margin-right, 就可以针对3的倍数进行选中;

div:nth-last-child(3n) {} 表示从前往后数, 3的倍数的元素;

css 子元素选择器相关推荐

css直接子元素怎么用,CSS 子元素选择器使用实例
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素. 子元素选择器使用大于号">"做为连接符. 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子 ...
html5 子元素选择器,CSS子元素选择器 - HTML电子邮件
Shaggy.. 6 这是可能的,是的,但你需要使用多个选择器,检查第一个单元格也是第四个最后一个单元格,第二个单元格也是第三个单元格,依此类推: .myclass2{ background:#000 ...
011_CSS子元素选择器
1. 与后代选择器相比, 子元素选择器(Child selectors)只能选择作为某元素的子元素. 2. 选择子元素 2.1. 如果您不希望选择任意的后代元素, 而是希望缩小范围, 只选择某个元素的 ...
HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
【Google】【内部样式表】【外部样式表：听力地点方向题】【设置字体间距】【多类、子元素选择器】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】CSS基础——实验题1-6
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录实验1 1.题目 2.代码 3.网页运行效果实验2 1.题目 2.代码 3 ...
html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
今天在看css基础的时候,发现了一个很有趣的事情,那就是后代选择器与子元素选择器. 说来也惭愧,我以前一直以为,这俩是同一个东西,只是叫法不同而已,后来才发现,原来这俩是两个不同的东西. 后代选 ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器
小程序中的WXSS(css)选择器课程-子元素选择器微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhu ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...

css 子元素选择器

一，first-child

二，last-child

三，nth-child(n) 和 nth-last-child(n)

css 子元素选择器相关推荐

最新文章

热门文章