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

iteye   发布时间:2016-07-12 11:22:25   作者:huangqiqing123   我要评论
这篇文章主要介绍了CSS的后代选择器基础使用示例,是CSS入门学习中的基础知识,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

XML/HTML Code复制内容到剪贴板
  1. <p>  
  2.     my name is <strong>li<i>daze</i></strong>, hahah.   
  3. </p>  

CSS代码:

CSS Code复制内容到剪贴板
  1. p strong {   
  2.     font-size30px;   
  3. }   
  4. p i {   
  5.     font-size40px;   
  6. }  

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

示例1

XML/HTML Code复制内容到剪贴板
  1. <html>     
  2. <head>     
  3. <style type="text/css">     
  4. ul em {color:red; font-weight:bold;}     
  5. </style>     
  6. </head>     
  7.      
  8. <body>     
  9. <ul>     
  10.   <li>List item 1     
  11.     <ol>     
  12.       <li>List item 1-1</li>     
  13.       <li>List item 1-2</li>     
  14.       <li>List item 1-3     
  15.         <ol>     
  16.           <li>List item 1-3-1</li>     
  17.           <li>List item <em>1-3-2</em></li>     
  18.           <li>List item 1-3-3</li>     
  19.         </ol>     
  20.       </li>     
  21.       <li>List item 1-4</li>     
  22.     </ol>     
  23.   </li>     
  24.   <li>List item 2</li>     
  25.   <li>List item 3</li>     
  26. </ul>     
  27. </body>     
  28. </html>    

执行效果:
2016712112448353.png (320×225)

示例2

XML/HTML Code复制内容到剪贴板
  1. <html>     
  2. <head>     
  3. <style type="text/css">     
  4. div.sidebar {width:100px;height:100px;background:blue;}     
  5. div.maincontent {width:100px;height:100px;background:yellow;}     
  6.      
  7. div.sidebar a:link {color:white;}     
  8. div.maincontent a:link {color:red;}     
  9. </style>     
  10. </head>     
  11. <body>     
  12. <div class='sidebar'>     
  13. <a href ='#'>我是链接1<a/>     
  14. </div>     
  15.      
  16. <div class='maincontent'>     
  17. <a href ='#'>我是链接1<a/>     
  18. </div>     
  19. </body>     
  20. </html>    

执行效果
2016712112544349.png (323×234)

一点说明:

XML/HTML Code复制内容到剪贴板
  1. a:link {color: #FF0000}         /* 未访问的链接 */     
  2. a:visited {color: #00FF00}  /* 已访问的链接 */     
  3. a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */     
  4. a:active {color: #0000FF}   /* 选定的链接 */    
蓄力AI

相关文章

  • css id选择器使用_动力节点Java学院整理

    这篇文章主要为大家详细介绍了css id选择器使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-22
  • CSS 属性选择器_动力节点Java学院整理

    对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。下文给大家介绍了css属性选择器的相关知识,感兴趣的朋友一
    2017-06-22
  • 总结30个CSS3选择器

    本文总结了30个CSS3选择器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-13
  • css3类选择器之结合元素选择器和多类选择器用法

    这篇文章主要介绍了css3类选择器之结合元素选择器和多类选择器用法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-09
  • 详解css常用选择器

    本文主要对CSS选择器进行详细介绍,对初学CSS样式的朋友具有很好的参考价值。下面跟着小编一起来看下吧
    2016-12-23
  • 对CSS3选择器的研究(详解)

    下面小编就为大家带来一篇对CSS3选择器的研究(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-09-16
  • CSS选择器的权重与优先规则分享

    在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先
    2016-09-11
  • CSS 选择器演示

    点击左侧列表中的选择器,即可在右侧中预览到选择器匹配到的内容。如果没有任何匹配,说明所使用的浏览器不支持该选择器
    2016-08-30
  • 全面了解css 属性选择器

    下面小编就为大家带来一篇全面了解css 属性选择器。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-20
  • CSS的相邻兄弟选择器用法简单讲解

    对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
    2016-07-12

最新评论