CSS中的上下文选择器

最新推荐文章于 2023-03-14 23:12:40 发布

原创最新推荐文章于 2023-03-14 23:12:40 发布 · 978 阅读

1 ·

CC 4.0 BY-SA版权

初学者同时被 2 个专栏收录

33 篇文章

订阅专栏

静态HTML

17 篇文章

订阅专栏

博客围绕CSS中的上下文选择器展开，虽未给出具体内容，但可知聚焦于该选择器相关信息技术知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上下文选择器</title>
		<style type="text/css">
			/* 上下文选择器就是构成了"父子"或层级关系的一组元素,通过他们的关系设置样式*/
			ol li{list-style-type: upper-alpha; color: red;}
		    ul li{list-style-image: url(img/tupo.png); color: blue;}
		    /*id选择器中的上下文选择器*/
		   #mytale td{color: green;}
		   /* 类选择器中的上下文选择器*/
		   .mysqan span{color: yellow;}
		</style>
	</head>
	<body>
		<h1>程序员的基本素养</h1>
		<ol>
			<li>坚持以规范的形式编码</li>
			<li>坚持锻炼</li>
			<li>坚持礼貌待人</li>
			<li>坚持12点之前入睡</li>
			<li>坚持6:30之前起床</li>
			<li>坚持以最快最优方式完成任务完成</li>
		</ol>
		<ul>
			<li>坚持以规范的形式编码</li>
			<li>坚持锻炼</li>
			<li>坚持礼貌待人</li>
			<li>坚持12点之前入睡</li>
			<li>坚持6:30之前起床</li>
			<li>坚持以最快最优方式完成任务完成</li>
		</ul>
		<table id="mytale" border="1">
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</table>
		<p class="mysqan">我的世界因为<span>我变了吗?</span>有你不会累</p>
		<p class="mysqan">坚持以规范的<span>我变了吗?</span>形式编码</p>
		<p class="mysqan">坚持以最快<span>我变了吗?</span>最优方式完成任务完成</p>
	</body>
</html>