CSS中如何使用后代选择器

本篇文章为大家展示了CSS中如何使用后代选择器,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

专注于为中小企业提供成都网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业永胜免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了成百上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

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

XML/HTML Code复制内容到剪贴板

  1.   

  2.     my name is lidaze, hahah.   

  3.   

CSS代码:

CSS Code复制内容到剪贴板

  1. p strong {   

  2.     font-size: 30px;   

  3. }   

  4. p i {   

  5.     font-size: 40px;   

  6. }  

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

示例1

XML/HTML Code复制内容到剪贴板

  1.      

  2.      

  3.      

  4. ul em {color:red; font-weight:bold;}     

  5.      

  6.      

  7.      

  8.      

    •      

    •   

    • List item 1     

    •     

             

      1.       

      2. List item 1-1
      3.      

      4.       

      5. List item 1-2
      6.      

      7.       

      8. List item 1-3     

      9.         

               

        1.           

        2. List item 1-3-1
        3.      

        4.           

        5. List item 1-3-2
        6.      

        7.           

        8. List item 1-3-3
        9.      

        10.         

             

      10.       

      11.      

      12.       

      13. List item 1-4
      14.      

      15.     

           

    •   

    •      

    •   

    • List item 2
    •      

    •   

    • List item 3
    •      

         

  9.      

  10.     

执行效果:
CSS中如何使用后代选择器

示例2

XML/HTML Code复制内容到剪贴板

  1.      

  2.      

  3.      

  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.      

  10.      

  11.      

  12.      

  13. 我是链接1     

     

  •      

  •      

  • 我是链接1     

  •      

  •      

  •     

  • 执行效果
    CSS中如何使用后代选择器

    一点说明:

    XML/HTML Code复制内容到剪贴板

    1. a:link {color: #FF0000}         /* 未访问的链接 */     

    2. a:visited {color: #00FF00}  /* 已访问的链接 */     

    3. a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */     

    4. a:active {color: #0000FF}   /* 选定的链接 */    

    上述内容就是CSS中如何使用后代选择器,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


    文章题目:CSS中如何使用后代选择器
    文章路径:
    http://ybzwz.com/article/pdojee.html

    其他资讯