CSS的后代选择器基础使用示例
iteye 发布时间:2016-07-12 11:22:25 作者:huangqiqing123 我要评论
这篇文章主要介绍了CSS的后代选择器基础使用示例,是CSS入门学习中的基础知识,需要的朋友可以参考下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
基础
来看一个后代选择器的最简单写法,strong标签属于p标签的后代,i标签属于strong标签后代:
HTML代码:
XML/HTML Code复制内容到剪贴板
- <p>
- my name is <strong>li<i>daze</i></strong>, hahah.
- </p>
CSS代码:
CSS Code复制内容到剪贴板
- p strong {
- font-size: 30px;
- }
- p i {
- font-size: 40px;
- }
1、在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。
2、选择器之间的空格是一种结合符。
3、后代选择器,后代的层次间隔可以是无限的,注意与子元素选择器的区别。
示例1
XML/HTML Code复制内容到剪贴板
- <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
XML/HTML Code复制内容到剪贴板
- <html>
- <head>
- <style type="text/css">
- div.sidebar {width:100px;height:100px;background:blue;}
- div.maincontent {width:100px;height:100px;background:yellow;}
- div.sidebar a:link {color:white;}
- div.maincontent a:link {color:red;}
- </style>
- </head>
- <body>
- <div class='sidebar'>
- <a href ='#'>我是链接1<a/>
- </div>
- <div class='maincontent'>
- <a href ='#'>我是链接1<a/>
- </div>
- </body>
- </html>
执行效果
一点说明:
XML/HTML Code复制内容到剪贴板
- a:link {color: #FF0000} /* 未访问的链接 */
- a:visited {color: #00FF00} /* 已访问的链接 */
- a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
- a:active {color: #0000FF} /* 选定的链接 */
相关文章
- 这篇文章主要为大家详细介绍了css id选择器使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-22
- 对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。下文给大家介绍了css属性选择器的相关知识,感兴趣的朋友一2017-06-22
- 本文总结了30个CSS3选择器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-04-13
- 这篇文章主要介绍了css3类选择器之结合元素选择器和多类选择器用法,非常不错,具有参考借鉴价值,需要的朋友可以参考下2017-03-09
- 本文主要对CSS选择器进行详细介绍,对初学CSS样式的朋友具有很好的参考价值。下面跟着小编一起来看下吧2016-12-23
- 下面小编就为大家带来一篇对CSS3选择器的研究(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦2016-09-16
- 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先2016-09-11
- 点击左侧列表中的选择器,即可在右侧中预览到选择器匹配到的内容。如果没有任何匹配,说明所使用的浏览器不支持该选择器2016-08-30
- 下面小编就为大家带来一篇全面了解css 属性选择器。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-20
- 对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:2016-07-12
最新评论