CSS样式中选择器失效问题

简介: 对于怎么排查样式失效:    1. 学会使用小程序开发者工具提供的小程序调试工具和Chrome调试工具来排查原因(这会很大程度上减少排查问题的    时间);    2. 首先需要确认标签有可能使用什么来作为样式选择器,最常用的是标签、class、id,确认是否设置了相应的属性;    3.

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

        33_92_b985b08e9f32b65.png 

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

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

1
2
body  #a{color:red} // 不必要的写法,除了额外增加选择器权重没有任何必要。
#a{color:red} // 这样即可


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


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

目录
相关文章
|
2天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
7天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
8天前
|
前端开发
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
|
8天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
17 1
|
8天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
23 1
|
15天前
|
前端开发
要使用CSS选择器选中特定类别的元素
【5月更文挑战第31天】要使用CSS选择器选中特定类别的元素
19 2
|
15天前
|
前端开发
CSS选择器
【5月更文挑战第31天】CSS选择器
20 1
|
15天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
24 1
|
23天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
28 1
|
25天前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
22 1