html中基本选择器的优先级,CSS基础知识-选择器的种类及优先级

一、CSS选择器常见的有几种?

常见的有

1、id选择器

见自己编写的如下代码：html>  

          Document        

这是id选择器

     

这不是id选择器

  

2、class选择器html>  

          Document        

这是class选择器

     

这不是class选择器

  

3、属性选择器

3.1 属性名加属性值型html>  

          Document          用户名 
     密码    

3.2纯属性名型html>  

          Document     

 这里是匿名者的图片                 

  

4、分组选择器

用“,”隔开，表示该组元素属性都会作用html>  

          Document    

 这是h1标题

 

 这也是h1标题

 

      

这是div里的h1

     

 这是div里的p 

    

  

5、派生选择器html>  

          Document    

 这是h1标题

 

      

这是div里的h1

       

 这也是div里的h1标题

      

 这是div里的p 

   

  

6、伪类选择器

比如.hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等html>  

          Document    

      这是伪类选择器 

  

又例如：html>  

          Document    

 选中后字体变红色背景变蓝色

 

 选中后不变色

  

7、伪元素选择器

:after、:before等html>  

          Document    

•      
• 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”     
• 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”     
• 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”     
• 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字” 

  

8、组合选择器

比如E,F/E F(后代选择器)/E>F(子元素选择器)/E+F(直接相邻元素选择器----匹配之后的相邻同级元素)/E~F(普通相邻元素选择器----匹配之后的同级元素)html>  

      Document    

   这是外层DIV   

       这是h1大标题   

   

       这是外层DIV里的div   

       这是中层div的h1标题1   

   

 这是中层div里的段落

   

       这是中层div的h1标题2   

        

 这是内层div           

 这是内层div的h1标题

        

   

 

 这也是h1大标题 

 

   这还是h1大标题 

 

  

二、选择器的优先级是怎样的?选择器优先级由高到低分别为：

!important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器(* 应少用)>浏览器自定义；当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：

1、位于

标签里的