css---学习之路（高级选择器）

最新推荐文章于 2023-12-13 17:23:49 发布

牛总来学习了

最新推荐文章于 2023-12-13 17:23:49 发布

阅读量99

点赞数

分类专栏： css 文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_57480977/article/details/125391246

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

高级选择器：

层次选择器：

后代选择器 E F

在这里插入图片描述

选中E标签下所有F元素
示例：

<style type="text/css">
	div a{
		color: red;
	}
</style>
<body>
	<div>
		<a>这是后代选择器</a>
	</div>
</body>

在这里插入图片描述

子选择器 E>F

在这里插入图片描述

选中E标签标签下子元素F
示例：

<style type="text/css">
	div a{
		color: red;
	}
	div>p{
		color: blue;
	}
</style>
<body>
	<div>
		<a>这是后代选择器</a>
		<p>p 标签</p>
		<a><p>这是a 标签</p></a>
	</div>
</body>

在这里插入图片描述

相邻兄弟选择器 E+F

在这里插入图片描述

选中E标签相邻的兄弟元素F（E标签下）

通用兄弟选择器 E~F

在这里插入图片描述

选中E标签下所有的兄弟元素F

.h21~h2{
	color: blue;
}

<h2 class="h21">如何做菜？</h2>
<p>
1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；<br />
2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；<br />
3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；<br />
4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。<br />
</p> 
<h2>如何经营餐厅？</h2>
<p>
1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短心情越好；好友间亲密度越高，可雇用的时间越长；<br />
2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加；<br />
3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。<br />
</p> 
<h2>如何吸引顾客？</h2>

在这里插入图片描述

结构伪类选择器

在这里插入图片描述
常用的几个伪类选择器示意图：

小结：
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
示例：

li p:nth-of-type(1){
	font-size: 14px;
	color: #640000;
}
li p:nth-of-type(2){
	font-size: 14px;
	color: blue;
}

列举最后一个列表：
			<li>
					<img src="img/aqy/img4.png" />
					<h3>山海经之赤影传说</h3>
					<p>娜扎张翰再度联手</p>
					<p>点击次数：242445次</p>		
				</li>

在这里插入图片描述