css_2

CSS高级选择器

层次选择器

1、后代选择器 E F:会定位父标签body下所有的子标签p,范围更大
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>层次选择器</title>
		<style>
			/* 后代选择器 */
			body p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>abc</p>
		<h1>今天你迟到了吗</h1>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li><p>疫情二三事</p></li>
			<li>几个小目标</li>			
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述
从图上我们可以看到,body下所有p标签的字体变成红色

2、子选择器 E>F: 会定位父标签body内所有的直接子标签p(只定义在其内部-紧邻父标签,没有其它父标签影响)
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 子选择器 */
			body>p{
				color: aqua;
			} 
		</style>
	</head>
	<body>
		<p>abc</p>
		<h1>今天你迟到了吗</h1>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li><p>疫情二三事</p></li>
			<li>几个小目标</li>			
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述
从图上我们可以看到:< li>下的p标签字体颜色没有发生改变,因为它不是body的直接子标签

3、相邻兄弟选择器 E+F: 会向下定位紧挨着的第一个同级标签p

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>层次选择器</title>
		<style>
			/* 相连兄弟 紧跟h1后面同级p */
			h1+p{
				color: chocolate;
			}
		</style>
	</head>
	<body>
		<p>abc</p>
		<h2>今天你迟到了吗</h2>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<p>博客忘记提交了</p>
		<ul>
			<li><p>疫情二三事</p></li>
			<li>几个小目标</li>			
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述

从图上我们看到:h1后面的同级p标签有两个,字体颜色发生变化的是紧挨着的第一个

4、通用兄弟选择器 E~F: 会向下定位所有的同级标签p
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>层次选择器</title>
		<style>
			/* h2后面的同级p标签变颜色 */
			h2~p{
				color:darkblue
			} 
		</style>
	</head>
	<body>
		<p>abc</p>
		<h2>今天你迟到了吗</h2>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li><p>疫情二三事</p></li>
			<li>几个小目标</li>			
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述
从图上我们看到:h2后面的同级p标签变颜色

结构伪类选择器

1、E:first-child:作为父元素的第一个子元素的元素E
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 父元素下的第一个标签 */
			p:first-child{
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="#">练习</a>
		<p>abc</p>
		<h2>今天你迟到了吗</h2>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li><p>疫情二三事</p></li>
			<li>几个小目标</li>
			<li>结构伪类选择器</li>
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述
从图上我们看到:abc颜色没有变化,因为第一个标签是< a>,疫情二三事颜色发生变化,因为标签< p>是< li> 下的第一个标签

2、E:last-child 作为父元素的最后一个子元素的元素E
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li:last-child{
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="#">练习</a>
		<p>abc</p>
		<h2>今天你迟到了吗</h2>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li><p>疫情二三事</p></li>
			<li>几个小目标</li>
			<li>结构伪类选择器</li>
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述
从图上可以看到:结构伪类选择器字体发生变化,因为该< li>是< ul>下的最后一个标签

3、E F:nth-child(n) 选择父级元素E的第n个子元素F,(n可以是1、2、3)
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li:nth-child(2){
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="#">练习</a>
		<p>abc</p>
		<h2>今天你迟到了吗</h2>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li><p>疫情二三事</p></li>
			<li>几个小目标</li>
			<li>结构伪类选择器</li>
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述
从图上可以看到:几个小目标演示发生变化,因为该< li>是< ul>的第二个标签

4、E:first-of-type 选择父元素内具有指定类型的第一个E元素
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p:first-of-type{
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="#">练习</a>
		<p>abc</p>
		<h2>今天你迟到了吗</h2>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li><p>疫情二三事</p></li>
			<li>几个小目标</li>
			<li>结构伪类选择器</li>
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述
从图上可以看到:abc、疫情二三事字体颜色都发生变化,< p>abc< /p>虽然不是第一个标签,却是第一个p标签

5、E:last-of-type 选择父元素内具有指定类型的最后一个E元素
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p:last-of-type{
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="#">练习</a>
		<p>abc</p>
		<h2>今天你迟到了吗</h2>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li>疫情二三事</li>
			<li>几个小目标</li>
			<li>结构伪类选择器</li>
		</ul>
	</body>
</html>

页面展示:
在这里插入图片描述
子元素< p>嘉文四世继承王位!< /p>是父元素body下最后一个p标签

6、E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			 body p:nth-of-type(2){
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="#">练习</a>
		<p>abc</p>
		<h2>今天你迟到了吗</h2>
		<p>今天打字<span>为啥</span>还没提交</p>
		<h1>项目</h1>
		<p>嘉文四世继承王位!</p>
		<ul>
			<li>疫情二三事</li>
			<li>几个小目标</li>
			<li>结构伪类选择器</li>
		</ul>
	</body>
</html>

在这里插入图片描述
子元素< p>今天打字< span>为啥< /span>还没提交< /p>是父元素body下第二个p标签

属性选择器

1、E[attr] 选择匹配具有属性attr的E元素
代码显示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p[id]{
				color: red;
			}
		</style>
	</head>
	<body>
		<form action="">
			<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
			<p><input type="password" name="pwd"></p>
			<p id="aa">
				<input type="radio" name="hobby" value="sport">体育
				<input type="radio" name="hobby" value="paint">绘画
				<input type="radio" name="hobby" value="music">音乐
			</p>
			<p><input type="submit" value="点我试试"></p>
		</form>
	</body>
</html>

页面展示:
在这里插入图片描述
匹配具有id属性的p标签

2、E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p[id]{
				color: red;
			}
			input[type=submit]{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<form action="">
			<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
			<p><input type="password" name="pwd"></p>
			<p id="aa">
				<input type="radio" name="hobby" value="sport">体育
				<input type="radio" name="hobby" value="paint">绘画
				<input type="radio" name="hobby" value="music">音乐
			</p>
			<p><input type="submit" value="点我试试"></p>
		</form>
	</body>
</html>

页面展示:
在这里插入图片描述
匹配属性type="submit"的input标签

3、E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p[id]{
				color: red;
			}
			input[type=submit]{
				color: #0000FF;
			}
			input[name^=u]{
				color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<form action="">
			<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
			<p><input type="password" name="pwd"></p>
			<p id="aa">
				<input type="radio" name="hobby" value="sport">体育
				<input type="radio" name="hobby" value="paint">绘画
				<input type="radio" name="hobby" value="music">音乐
			</p>
			<p><input type="url" name="url" value="http://www.baidu.com"></p>
			<p><input type="submit" value="点我试试"></p>
		</form>
	</body>
</html>

页面展示:
在这里插入图片描述
匹配属性name以u开头的input标签

4、E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p[id]{
				color: red;
			}
			input[type=submit]{
				color: #0000FF;
			}
			input[name^=u]{
				color: #00FFFF;
			}
			input[type$=t]{
				color: brown;
			}
		</style>
	</head>
	<body>
		<form action="">
			<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
			<p><input type="password" name="pwd"></p>
			<p id="aa">
				<input type="radio" name="hobby" value="sport">体育
				<input type="radio" name="hobby" value="paint">绘画
				<input type="radio" name="hobby" value="music">音乐
			</p>
			<p><input type="url" name="url" value="http://www.baidu.com"></p>
			<p><input type="submit" value="点我试试"></p>
		</form>
	</body>
</html>

页面展示:
在这里插入图片描述
匹配属性type以t结尾的input标签

5、E[attr*=val] 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配
代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p[id]{
				color: red;
			}
			input[type=submit]{
				color: #0000FF;
			}
			input[name^=u]{
				color: #00FFFF;
			}
			input[type$=t]{
				color: brown;
			}
			input[name*=m]{
				color: cornflowerblue;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<form action="">
			<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
			<p><input type="password" name="pwd"></p>
			<p id="aa">
				<input type="radio" name="hobby" value="sport">体育
				<input type="radio" name="hobby" value="paint">绘画
				<input type="radio" name="hobby" value="music">音乐
			</p>
			<p><input type="url" name="url" value="http://www.baidu.com"></p>
			<p><input type="submit" value="点我试试"></p>
		</form>
	</body>
</html>

页面展示:
在这里插入图片描述
匹配属性name包含字母m的input标签

内容概要:本文为《科技类企业品牌传播白皮书》,系统阐述了新闻媒体发稿、自媒体博主种草短视频矩阵覆盖三大核心传播策略,并结合“传声港”平台的AI工具资源整合能力,提出适配科技企业的品牌传播解决方案。文章深入分析科技企业传播的特殊性,包括受众圈层化、技术复杂性传播通俗性的矛盾、产品生命周期影响及2024-2025年传播新趋势,强调从“技术输出”向“价值引领”的战略升级。针对三种传播方式,分别从适用场景、操作流程、效果评估、成本效益、风险防控等方面提供详尽指南,并通过平台AI能力实现资源智能匹配、内容精准投放全链路效果追踪,最终构建“信任—种草—曝光”三位一体的传播闭环。; 适合人群:科技类企业品牌市场负责人、公关传播从业者、数字营销管理者及初创科技公司创始人;具备一定品牌传播基础,关注效果可量化AI工具赋能的专业人士。; 使用场景及目标:①制定科技产品全生命周期的品牌传播策略;②优化媒体发稿、KOL合作短视频运营的资源配置ROI;③借助AI平台实现传播内容的精准触达、效果监测风险控制;④提升品牌在技术可信度、用户信任市场影响力方面的综合竞争力。; 阅读建议:建议结合传声港平台的实际工具模块(如AI选媒、达人匹配、数据驾驶舱)进行对照阅读,重点关注各阶段的标准化流程数据指标基准,将理论策略平台实操深度融合,推动品牌传播从经验驱动转向数据工具双驱动。
【3D应力敏感度分析拓扑优化】【基于p-范数全局应力衡量的3D敏感度分析】基于伴随方法的有限元分析和p-范数应力敏感度分析(Matlab代码实现)内容概要:本文档围绕“基于p-范数全局应力衡量的3D应力敏感度分析”展开,介绍了一种结合伴随方法有限元分析的拓扑优化技术,重点实现了3D结构在应力约束下的敏感度分析。文中详细阐述了p-范数应力聚合方法的理论基础及其在避免局部应力过高的优势,并通过Matlab代码实现完整的数值仿真流程,涵盖有限元建模、灵敏度计算、优化迭代等关键环节,适用于复杂三维结构的轻量化高强度设计。; 适合人群:具备有限元分析基础、拓扑优化背景及Matlab编程能力的研究生、科研人员或从事结构设计的工程技术人员,尤其适合致力于力学仿真优化算法开发的专业人士; 使用场景及目标:①应用于航空航天、机械制造、土木工程等领域中对结构强度和重量有高要求的设计优化;②帮助读者深入理解伴随法在应力约束优化中的应用,掌握p-范数法处理全局应力约束的技术细节;③为科研复现、论文写作及工程项目提供可运行的Matlab代码参考算法验证平台; 阅读建议:建议读者结合文中提到的优化算法原理Matlab代码同步调试,重点关注敏感度推导有限元实现的衔接部分,同时推荐使用提供的网盘资源获取完整代码测试案例,以提升学习效率实践效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值