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

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

1.   

2.     my name is lidaze, hahah.   

3.   

CSS代码：

1. p strong {   
2.     font-size: 30px;   
3. }   
4. p i {   
5.     font-size: 40px;   
6. }  

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

示例1

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

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