1、2后代选择器
这一片月
帮助1人
提示：后代选择器：又称之为包含选择器，主要是父类包含子类。
1、语法：
样式1 样式2{
样式说明
}
注意：（1）、上面语法，在样式1和样式2之间用空格隔开。
（2）、只有样式2是样式1后代才能是后代选择器。
（3）、元素1是父类，而元素2是子类，比如：
ol li{
color:pink;
}
（4）、在后面只能一层一层检查,比如:
ol li a{
color:pink;
}
自己代码展示：
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>后代选择器</title>
-
<style>
-
/* 什么是后代选择器：就是一个父类里面必须包含一个子类、而这个子类一定是在父类的包含下 */
-
/* 这个时候我们要把这个小丽改颜色pink */
-
-
ul li {
-
color: pink;
-
}
-
-
ul li a {
-
/* 这个就是后代选择器：我们可以一层一层去设置他 、它的父类就是“ul”、而子类就是“li”、而小丽的孩子也是子类“a”*/
-
color: red;
-
}
-
-
.nav li a {
-
/* 这里有一个口诀：样式点定义、结构class调用、一个或多个 */
-
color: aqua;
-
}
-
</style>
-
</head>
-
-
<body>
-
<ul>
-
<li>我是小丽</li>
-
<li>我是小丽</li>
-
<li>我是小丽</li>
-
<li>我是小丽</li>
-
<li><a href="#">我是小丽的孩子</a></li>
-
</ul>
-
-
<ul class="nav">
-
<!-- 如果有两个一样的我们可以取一个class名字来区分 -->
-
<li>我是小丽</li>
-
<li>我是小丽</li>
-
<li>我是小丽</li>
-
<li>我是小丽</li>
-
<li><a href="#">我是小丽的孩子</a></li>
-
<li><a href="#">我是小丽的孩子</a></li>
-
<li><a href="#">我是小丽的孩子</a></li>
-
<li><a href="#">我是小丽的孩子</a></li>
-
</ul>
-
<ol>
-
<li>我是小明</li>
-
<li>我是小明</li>
-
<li>我是小明</li>
-
<li>我是小明</li>
-
</ol>
-
-
<dl>
-
<dt>
-
<dd>名字</dd>
-
<dd>我是小花</dd>
-
<dd>我是小花</dd>
-
<dd>我是小花</dd>
-
</dt>
-
</dl>
-
</body>
-
-
</html>
显示结果：
总结
这篇好文章是转载于：编程之路
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 编程之路
- 本文地址： /boutique/detail/tanhhfgakf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
