本文共 2443 字，大约阅读时间需要 8 分钟。

CSS3选择器

    
           
       
   
   
   
    
    
     去到底部        
     
      CSS3选择器
     
        
     
      一、CSS3选择器分类
     
        
     
            
      
                
       
                    
        
 
         
 
          
 CSS3 选择器在 CSS2.1 的基础上增加了属性选择器、伪类选择器、过滤选择器。
 CSS3 选择器可以分为五类：
 1）基本选择器
 2）组合选择器
 3）伪类选择器
 4）伪元素选择器
 5）属性选择器
 其中，伪类选择器又可以细分为6种： 1）动态伪类选择器
 2）目标伪类选择器
 3）语言伪类
 4）UI 元素状态伪类选择器
 5）结构伪类选择器
 6）否定伪类选择器 
 
         
 
        
                
       
            
      
        
     
        
     
      二、基本选择器
     
        
     
            
      
                
       
                    
        
 
         
 
          
1、标签选择器
 
          
 
           
 标签选择器直接引用 HTML 标签名称，也称为类型选择器，规定了网页元素在页面中的默认显示方式。
 示例代码： 
 
           
 
             <style type="text/css">
 p{ 
  font-size:12px;
  color:red;
 }
 </style>  
           
 
          
 
          
2、类选择器
 
          
 
           
 类选择器能够为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素拥有不同样式。
 类选择器一个（.）前缀开头，紧跟一个自定义类名。
 应用类样式可以用class 属性来实现。
 示例代码：
 示例1： 
 
           
 
             <style type="text/css">
 p{ 
  font-size:12px;
  color:red;
 }
 .font18px{font-size:18px;}
 </style>  
           
 
           
效果如下图所示：
 
            
           
 第二段应用了属性.font18px，因此字体显得更大些。
 示例2： 
 
           
 
             <style type="text/css">
 p{ 
  font-size:12px;
  color:red;
 }
 .font18px{font-size:18px;}
 .underline{ text-decoration:underline;}
 .italic{ font-style:italic;}
 </style>  
           
 
           
效果如下图：
 
            
           
 第一段应用了属性.underline；第三段则应用了.italic;
 第二段则用了三个属性：.font18px .underline .italic
 示例3： 
 
           
 
             <style type="text/css">
 p{ 
  font-size:12px;
  color:red;
 }
 .font18px{font-size:18px;}
 p.font18px{ font-size:24px; }
 </style>  
           
 
          
 
          
3、ID 选择器
 
          
 
           
 ID 选择器以井号(#)作为前缀，紧接着是一个自定义的 ID 名。
 应用 ID 选择器可以使用 id 属性来实现.
 示例1： 
 
           
 
             <style type="text/css">
 #box{ 
  background: url(images/2.jpg) center bottom;
  height: 200px;
  width: 400px;
  border: solid 2px red;
  padding: 100px;
 }
 </style>  
           
 
           
效果如下图：
 
            
           
 也可以在 ID 选择器之前增加一个 HTML 元素标签，针对上例则可以增加一个 div 组成 div#box
 此时的优先级会大于原来单纯的 #box，也即是说，在同等条件下，浏览器会优先解析 div#box 选择器定义的样式。
 一般通过 ID 选择器来定翼 HTML 框架的布局效果，因为 HTML 框架元素的 id 都是唯一的。 
 
          
 
          
4、通配选择器
 
          
 
           
 如果 HTML 所有元素都需要定翼相同的样式，则可以使用通配符选择器；通配符选择器通过(*)来表示。
 示例： 
 
           
 
             *{ 
  margin:0;
  padding:0;
 }  
           
 
          
 
         
 
        
                
       
            
      
        
     
        
     
      三、组合选择器
     
        
     
            
      
                
       
                    
        
 
         
 
          
当把两个或多个基本选择器组合在一起，就形成了一个复杂的选择器，即组合选择器。
 
          
1、包含选择器
 
          
 
           
示例1
 
           
 
             <style type="text/css">
  #header p {font-size:14px;}
  #main p {font-size:12px;}
 </style>  
           
 
           
效果如下图：
 
            
          
 
          
2、子选择器
 
          
 
           
 子选择器，是指定父元素包含的子元素。
 子选择器使用"<"表示。 示例： 
 
           
 
             <style type="text/css">
   span{/*span 元素默认样式*/
    font-size:12px;
  }
  div < span { /*div 元素包含的 span 子元素的默认样式*/
    font-size:24px;
  }
 </style>  
           
 
           
运行效果如下图：
 
            
          
 
         
 
        
                
       
            
      
        
     
        
     
      返回顶部
     
    
    
   
   
   
        ©2019 
    2923616405@qq.com all rights reserved
   

转载地址：http://cxqgn.baihongyu.com/