学习 Python 的 Day13,前端选择器

最新推荐文章于 2024-08-06 16:04:58 发布

KathAmy

最新推荐文章于 2024-08-06 16:04:58 发布

阅读量181

点赞数

分类专栏： HTML 初级Python 文章标签：学习前端

本文链接：https://blog.csdn.net/qq_67780151/article/details/125663057

版权

这篇博客详细介绍了Python学习的第13天内容，主要聚焦于前端开发中的选择器。包括了选择器的种类、优先级、伪类选择器的使用，还探讨了标准流布局、浮动基础和应用，定位技术以及盒子模型的概念，通过运行结果和实验录屏帮助理解。

摘要由CSDN通过智能技术生成

Day 13

1. 选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			/* 后代选择器 */
			body #three{
     
				color:aqua;
			}
			
			/* 兄弟选择器 */
			#one ~ #two{
     
				font-size: 20px;
			}
			
			/* 相邻兄弟选择器 */
			#one + li{
     
				text-decoration: darkred;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li id="one">妲己</li>
			<li>庄周</li>
			<li id="two">安琪拉</li>
			<li id="three">小乔</li>
		</ul>
		<ol>
			<li id="three"></li>
			<li></li>
			<li></li>
		</ol>
	</body>
</html>

运行结果
在这里插入图片描述

2. 选择器的优先级

<!--
	样式优先级问题：
	优先级和选择器相关
	
	第1级：   属性后面添加！important
	第2级：   内联样式
	
	其他的任何样式都小于这两级，优先级看权重，权重越大，优先级越高
	*  ------ 1
	标签选择器 ------ 1
	class选择器 ------ 2
	id选择器 ------ 4
	父子、后代、兄弟、相邻兄弟 ------ 看符号之间各个选择器的权重和，但是先看符号前边的，如果前边的相等，再比较后边的

	如果权重相等，最后写的谁实现的就是谁
	但是，如果权重不一样，但是都是修改的一个标签，那么不重叠的样式都会实现
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
		/* 	.p1{
				color:pink;
				text-decoration: underline;
			}
			
			#p1{
				color:blue;
			} */
			
			div > span > p{
     
				color: purple;
			}
			
			.d1 > .s1 > p{
     
				color: aqua