css之后代选择器

104 阅读 0 评论 69 点赞

我是靠谱客的博主热心钢笔，最近开发中收集的这篇文章主要介绍css之后代选择器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

后代选择器：

       /* 将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>

执行效果：