CSS中如何使用后代选择器
本篇文章为大家展示了CSS中如何使用后代选择器,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
专注于为中小企业提供成都网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业永胜免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了成百上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
基础
来看一个后代选择器的最简单写法,strong标签属于p标签的后代,i标签属于strong标签后代:
HTML代码:
XML/HTML Code复制内容到剪贴板
my name is lidaze, hahah.
CSS代码:
CSS Code复制内容到剪贴板
p strong {
font-size: 30px;
}
p i {
font-size: 40px;
}
1、在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。
2、选择器之间的空格是一种结合符。
3、后代选择器,后代的层次间隔可以是无限的,注意与子元素选择器的区别。
示例1
XML/HTML Code复制内容到剪贴板
- List item 1
- List item 1-1
- List item 1-2
- List item 1-3
- List item 1-3-1
- List item 1-3-2
- List item 1-3-3
执行效果:
示例2
XML/HTML Code复制内容到剪贴板
执行效果
一点说明:
XML/HTML Code复制内容到剪贴板
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
上述内容就是CSS中如何使用后代选择器,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
文章题目:CSS中如何使用后代选择器
文章路径:http://ybzwz.com/article/pdojee.html