css 子元素选择器

first-child 、last-child、nth-child(n)、nth-last-child(n)

weixin_43833851

6839人浏览 · 2021-12-03 00:04:28

weixin_43833851 · 2021-12-03 00:04:28 发布

还在对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>

效果如下：