CSS样式中选择器失效问题

对于怎么排查样式失效: 
   1. 学会使用小程序开发者工具提供的小程序调试工具和Chrome调试工具来排查原因（这会很大程度上减少排查问题的 
   时间）； 
   2. 首先需要确认标签有可能使用什么来作为样式选择器，最常用的是标签、class、id，确认是否设置了相应的属性； 
   3. 使用调试工具查看样式是否真正落在该元素上，查看使用了那样样式； 
   4. 找到相应样式后检查编写格式和内容是否正确； 
   5. 样式覆盖，查找是不是有多个选择器同时作用于一个元素，并且有相同的样式设置，排除样式覆盖可能； 
   6. 如果是id选择器应该检查是否存在id重复，导致； 
   7. 查看是不是使用了多选择器导致页面结构改变时，忘记修改； 
   8. 查看是否存在js引入样式改变导致； 
建议: 
    A:不推荐使用多选择器，因为多选择在页面结构发生变化时(用户自己修改、或替换成组件时)可能忘记修改，导致页 
    面失效； 
    如图: 

         

    整个选择器可以看出是指向image标签，如果我们需要修改页面的结构，即可以在image之前随便加上一个标签包住 
    image标签；这样就在无形中使加在image的样式失效，在刚开始的时候可能会记得会去在选择器中改一下，再加一 
    层，从而指向image标签；但是，如果随着页面的结构越来越复杂呢？隔一段时间之后需要改一下样式呢？或者这是 
    样式写完之后是另一个技术人员在维护呢？这些都是问题，最终的结果就是导致任何不经意的修改容易让原来的样式 
    失效，而且问题排查起来非常困难。 

      B: 建议使用class 选择器钩子，从css的方面出发来说： 
      1、相对于class选择器，id选择器的权重实在太重了（100），这在一些项目中会造成灾难性的样式污染，以及 
      权重陷阱。 
      2、id在文档内必须是唯一的，而样式很多具有复用性。当然，使用id也意味着你的css选择器完全不需要嵌套： 
复制代码

       至于为什么大多数js使用id作为钩子，主要因为js通过id查询dom的速度是最快的。 
       id是不是一定会和js挂钩，这个是未必的，以下情况可能必须使用class： 
       循环插入若干组件，不同组件内绑定dom相同Function时。 


   有什么问题请您在下面咨询，大家一起讨论交流