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.      

9.      

   •   

   • List item 1     

   •     

          

     1.       

     2. List item 1-1
          

     3.       

     4. List item 1-2
          

     5.       

     6. List item 1-3     

     7.         

             

        1.           

        2. List item 1-3-1
             

        3.           

        4. List item 1-3-2
             

        5.           

        6. List item 1-3-3
             

        7.         

             

     8.       

          

     9.       

     10. List item 1-4
          

     11.     

          

   •   

        

   •   

   • List item 2
        

   •   

   • List item 3
        

        

10.      

11.     

执行效果：

示例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