css之后代选择器

最新推荐文章于 2024-07-14 22:50:12 发布

异想实验室

最新推荐文章于 2024-07-14 22:50:12 发布

阅读量483

点赞数

分类专栏： HTML 文章标签： css linq p2p

异想实验室

本文链接：https://blog.csdn.net/weixin_43775400/article/details/123187798

版权

HTML 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何利用CSS后代选择器来更改HTML中`

`和``标签样式。示例代码展示了如何设置`
`颜色为红色，``颜色为绿色并去除下划线，同时加粗字体。通过实例，读者可以理解后代选择器的用法及其在页面样式的应用。

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

后代选择器：

       /* 将ol里面的li标签样式进行更改 */
       /* 书写方式父标签，空格子标签 */
       /* 可以多级，父、子、孙 */

html+css代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<link rel="shortcut icon"
			href="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/favicon/favicon_d87cd2a.ico">
		<style>
			/* 将ol里面的li标签样式进行更改 */
			/* 书写方式父标签，空格 子标签 */
			/* 可以多级，父、子、孙 */

			ol li {
				color: red;
			}

			ol li a {
				color: green;
				text-decoration: none;
				font-weight: bold;

			}
		</style>
	</head>
	<body>

		<ol>
			<li>我是ol的 孩子</li>
			<li>我是ol的 孩子</li>
			<li>我是ol的 孩子</li>
			<li><a href="#">这个是孙子，使用后代选择器，更改了样式颜色</a> </li>

		</ol>

		<ul>
			<li>我是ul的 孩子</li>
			<li>我是ul的 孩子</li>
			<li>我是ul的 孩子</li>
		</ul>
	</body>

</html>

执行效果：