Maison > Article > interface Web > CSS的后代选择器基础使用示例详解
CSS的后代选择器基础使用示例详解
- 高洛峰original
- 2017-03-07 14:43:391949parcourir
基础
来看一个后代选择器的最简单写法，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</li>
<li>List item 3</li>
</ul>
</body>
</html>
执行效果：
示例2
<html>
<head>
<style type="text/css">
p.sidebar {width:100px;height:100px;background:blue;}
p.maincontent {width:100px;height:100px;background:yellow;}
p.sidebar a:link {color:white;}
p.maincontent a:link {color:red;}
</style>
</head>
<body>
<p class='sidebar'>
<a href ='#'>我是链接1<a/>
</p>
<p class='maincontent'>
<a href ='#'>我是链接1<a/>
</p>
</body>
</html>
执行效果
一点说明：
XML/HTML Code复制内容到剪贴板
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
-
a:active {color: #0000FF} /* 选定的链接 */
更多CSS的后代选择器基础使用示例详解相关文章请关注PHP中文网！
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：CSS的子元素选择器用法详细介绍Article suivant：css实现三角的简单实例详解