CSS选择器

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

CSS选择器：

1. 通配选择器：

      * {
        margin: 0;
        padding: 0;
      }

这种选择器在全局属性设置中比较常见，用途不多，一般会提前规定。

2. id选择器：

  
    
    
    
  
  
    
           
      id选择器用“#”选择。
    
  

id选择器一般用于独一无二的区块或者重要元素。

3. 类选择器：

  
    
    
    
  
  
    

      头部
    
    
大标题

  

类选择器用的比较多，因为可重复使用。

4. 标签选择器：

  
    
    
    
  
  
    

      头部
    
    
大标题

  

标签选择器用的不多，一般与其他选择器配合使用。

5. 伪类选择器：

  
    
    
    
  
  
    

      头部
    
    
大标题
    这是一段链接
  

6. 属性选择器：

  
    
    
    
  
  
    

      头部
    
    
大标题
    账号：
    密码：
    

      
      
    
  

7. 后代选择器：

  
    
    
    
  
  
    
我是大标题
    

      
我也是大标题
      

        
我还是
      
      
我是事实
    
  

这个概念比较模糊，见效果图：

后代选择器

8. 伪元素选择器：

I'm the king of the world.    ——《泰坦尼克号》

效果图：

伪元素选择器

9. 组合选择器：

组合选择器就是将各类选择器运用连接符组合使用，具体使用情况不尽相同，看需求，例如E+F、E~F、.E.F、等等。

---

2. 选择器的优先级是怎样的?

1. !important
2. style内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器默认样式

• 而具体情况是，选择器越具体，越接近下层，则越优先。
• 如果对同一个元素设置了不同样式，则：

1. 内联样式
2. style中越往下的样式

---

3. class 和 id 的使用场景?

class标签更加灵活，通常不会单独使用，而是和其他元素组合使用，由于其可重复使用的优点，在html文档中经常大量使用，相较于id选择器更加方便些。
id选择器主要用于特殊且重要的元素，以及外部结构区块。一般html文档会有很多区块，其中的主要结构区块都是用id选择器，结构语义化更清晰。

    
    



    

        头部
        
大标题
    
    

        
标题2
        

            

                这是一个段落。
            
        
    
    

        

            链接
        
    

效果图：

class和id使用场景

---

4. 使用CSS选择器时为什么要划定适当的命名空间？

1. 提高代码可读性；
2. 便于维护管理；
3. 保持代码的可拓展性；
4. 避免结构冲突。

---

5. 以下选择器分别是什么意思?

#header{     /* 选择id="header"的元素 */
}
.header{     /* 选择class="header"的元素 */
}
.header .logo{/* 选择祖先为class="header"的class="logo"元素 */
}
.header.mobile{/* 选择class中同时含有header和mobile的元素 */
}
.header p, .header h3{/* 选择祖先为class="header"的p元素，
                     同时选择祖先为class="header"的h3元素 */
}
#header .nav>li{/* 选择祖先为class="header"
             且直接父元素为class="nav"的li元素 */
}
#header a:hover{/* 选择祖先为class="header"的a元素的伪类:hover */
}

---

6. 列出你知道的伪类选择器

• :hover
• :link
• :active
• :first-of-type
• :first-child
• :nth-of-type()
• :nth-child()
• :last-of-type
• :last-child
• :focus
• :visited

---

7. :first-child和:first-of-type的作用和区别？

作用：

• first-child匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
• first-of-type匹配的是某父元素下相同类型子元素中的第一个，不限制是第一个子元素，只要是该类型元素的第一个就可以。

eg:

  
    
    
    
  
  
    

      
我是事实
      
我是事实
      
我是事实
      

        
我还是
      
      
我是事实
      
我是事实
    
  

效果图：

first-of-type效果图

如果把first-of-type换成first-child：

效果图：

first-child效果图

图中发现，值得注意的是：
即使是嵌套关系下的第一个子元素，也是会被匹配。

---

8. 运行如下代码，解析下输出样式的原因。

    
    




    

        
aa
        
bb
        
ccc
    

效果图：

代码效果图

• 蓝色背景：样式里面设置了first-of-type，也就是第一个类型的元素将应用为蓝色背景，而第一个类型就是p和h3，h3有2个，取第一个。
• 红色字：first-child是指后代中第一个子元素，第一个子元素是p，所以只是p应用了红色字。

---

9. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？

text-align: center作用是使元素水平居中，作用在块级元素上，让块级元素内部的行内元素水平居中。

---

10. 如果遇到一个属性想知道兼容性，在哪查看?

在can i use网站查询。
eg:

can i use

---

本文版权归本人和饥人谷所有，转载请注明来源，谢谢！