CSS样式中选择器失效问题-阿里云开发者社区

开发者社区> 扬朋> 正文

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时。 


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[转帖]ASP.NET 2.0中CSS失效的问题总结
ASP.NET 2.0中CSS失效的问题总结 经常有人遇到ASP.NET 2.0(ASP.NET 1.x中可能是有效的)中CSS失效的问题,现将主要原因和解决方法罗列如下: 1,CSS文件路径不正确 这个问题属于Web开发中的基础问题,一般采用相对路径会出现这样的问题,或者样式文件写在了母版页里面,在内容页与母版页不在同一级目录下时会出现这样的问题。
637 0
关于Mybatis-plus中性能插件失效问题
有关PerformanceInterceptor这个sql性能分析插件的类失效问题
75 0
CSS_边框样式
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54729515 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
671 0
CSS样式更改——2D转换
CSS样式更改——2D转换
706 0
博客园页面css样式
#sideBar,#blog_post_info_block { display: none; } #under_post_news { display: none; } /*评论框大小*/ #tbCommentBody.
995 0
CSS样式中选择器失效问题
对于怎么排查样式失效:    1. 学会使用小程序开发者工具提供的小程序调试工具和Chrome调试工具来排查原因(这会很大程度上减少排查问题的    时间);    2. 首先需要确认标签有可能使用什么来作为样式选择器,最常用的是标签、class、id,确认是否设置了相应的属性;    3.
736 0
Android EditText 获得输入焦点 以及requestfocus()失效的问题
最近做公司项目的时候,经常会遇到一个问题,就是我为某个控件如EditText设置requestfocus()的时候不管用,比如说登陆的时候,我判断下用户输入的密码,如果正确就登陆,错误就提示密码错误,并且输入框获取焦点,但是实际中确不起作用 package com.
1095 0
+关注
扬朋
支付宝小程序开发者运营专家
516
文章
69
问答
来源圈子
更多
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载