CSS选择器

最新推荐文章于 2023-12-26 15:35:47 发布

WuWuII

最新推荐文章于 2023-12-26 15:35:47 发布

阅读量88

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/a3562323/article/details/115397337

版权

13 篇文章 0 订阅

订阅专栏

1、基本选择器

标签名标签名
div p{}表示div里面所有的p标签，p标签可以是孙子。

<div>			----选到的是p1，p3
	<p>p1</p>
	<ul>
		<li>
			<p>p3</p>
		</li>
	</ul>
</div>

标签名>标签名
div>p选择div里面的p标签，并且这个p标签必须是儿子。

<div>			-----选到的是p1
	<p>p1</p>
	<ul>
		<li>
			<p>p3</p>
		</li>
	</ul>
</div>

标签名+标签名
div+p{}选择div相邻的p标签.1、层次相同2、必须相邻

<p>p1</p>		--选到的是P1
<div></div>
<h3></h3>
<p>p2</p>

标签名~标签名
div~p:选择div层次相同的所有p标签，可能是多个

标签名，标签名
同时选择多种标签。可以选择多个，每个之间使用逗号隔开

div,p{	//为所有的div和p标签设置样式
	font-size:10px;
}

同时满足两个条件。

div.name{
	//必须是个div标签并且这个标签还具有class="name"
	//选择具有有class="name"的div标签
}

当使用基本选择器，层次选择器都无法定位到该元素的时候，可以考虑使用伪类选择器，根据标签所在位置或者特征进行选择。

E必须是第一个孩子
男：first-child 必须是老大，并且是个男的。
div:first-child:选择在父元素当中，第一个div标签。必须是第一个标签

<body>
	<p>pppp</p>
	<div>111</div>
</body>

h2:first-child{
	//
}

E必须是最后一个孩子

.aa:last-child

<body>
	<p>pppp</p>
	<div class="aa">111</div>
</body>

E必须是第n个孩子

p:nth-child(3){

}

选择第一次出现的E，可以忽略前面的元素。
男：first-of-type 选择第一个出现的男孩，不考虑前面有几个姐姐
div:first-of-type 选择第一个出现的div

选择最后一次出现的E，可以忽略前面的E元素和其它元素。
男：last-of-type 选择最后一个出现的男孩，不考虑前面有几个姐姐和哥哥。
div:last-of-type 选择最后一个出现的div

选择第n次出现的E

关注