CSS的后代选择器基础使用示例

作者：huangqiqing123 字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS,选择器,后台选择器等相关知识,huangqiqing123 希望在学习及工作中可以帮助到您

基础
来看一个后代选择器的最简单写法，strong标签属于p标签的后代，i标签属于strong标签后代：
HTML代码：

<p>
my name is <strong>li<i>daze</i></strong>, hahah.
</p>

CSS代码：

p strong {
font-size: 30px;
}
p i {
font-size: 40px;
}

1、在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。
2、选择器之间的空格是一种结合符。
3、后代选择器，后代的层次间隔可以是无限的，注意与子元素选择器的区别。

示例1

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>
<body>
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2

您可能想查找下面的文章:

相关文章

2017-08-06IE6下css设置容器高度的BUG不能小于某个值
2017-08-06CSS3模拟动画下拉菜单效果
2017-08-06提升网页加载速度和体验以及图片优化的方法
2017-08-06左定宽度右自适应宽度并且等高布局实现代码
2017-08-06css样式加载顺序及覆盖顺序深入理解
2017-08-06超链接点击移动至上方以及点击过的css效果设置
2017-08-06css 字体设置(不同浏览器设置效果)
2017-08-06用CSS指定外部链接的样式代码
2017-08-06IE6、IE7、IE8、Firefox兼容性CSS HACK代码及示例
2017-08-06小议Data URI scheme及其在CSS中的相关使用