css复杂选择器

(Mr.Sun )

于 2019-03-02 09:12:25 发布

阅读量863

点赞数

CC 4.0 BY-SA版权

分类专栏：学习内容

本文链接：https://blog.youkuaiyun.com/qq_43393323/article/details/88071865

学习内容专栏收录该内容

32 篇文章

订阅专栏

本文深入解析CSS中的父子选择器、直接子元素选择器、并列选择器及分组选择器的使用方法，通过实例演示如何精确地定位和样式化页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父子选择器/派生选择器不一定非要标签，用其他也能代替

 <div>  
 <strong>      
 <em>123</em>  
 </strong>
 </div>
 <em>234</em> 
 
 div strong em {    background-color: red;}

2.直接子元素选择器只选择有直接关系的

 <div>  
<em>1</em>    
<strong>       
 <em>2</em>    
 </strong>  
 </div> 
 
 div>em{    background-color: red;} 

 <section>    
 <div>      
 <p>        
 <a href="">          
 <span></span>      
 </a>      
 </p>      
 <ul>        
 <li>          
 <a href="">            
 <span>              
 <em>1</em>            
 </span>         
  </a>          
  <p></p>       
   </li>       
    <li></li>      
    </ul>    
    </div>   
     <a href="">      
     <p>        
     <em>2</em>      
     </p>      
     <div></div>    
     </a>  
     </section> 
     
 section div ul li a em{    background-color: red;}

3.并列选择器不加空格
同样的标签看权重大小，权重一样后面覆盖前面

 <div>1</div>  
 <div class="demo">2</div>  
 <p class="demo">3</p> 
 
 div.demo{    background-color: red;}

分组选择器用逗号隔开

 <em>1</em>  
 <strong>2</strong>  
 <span>3</span>
 
 em,strong,span{    background-color: red;}