媒体查询由于css选择器权重，导致的不生效

最新推荐文章于 2024-05-16 15:11:52 发布
最新推荐文章于 2024-05-16 15:11:52 发布
阅读量178 收藏
点赞数
文章标签： css 媒体 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52161116/article/details/131009919
版权
在开发中使用less或sass等CSS预处理器会使得CSS层次更清晰，但也带来选择器权重叠加的问题，影响媒体查询。最佳实践是保持媒体查询中的选择器书写与style中一致，若层级过深，可利用开发者工具进行排查和优化。
摘要由CSDN通过智能技术生成

在我们开发中经常用到less或者sass等css预处理器，这样一来虽然css的层级更清晰了，但是会导致css选择器的权重叠加影响到了媒体查询，最好的解决办法是媒体查询中选择器的书写和style中的保持一致，如果层级太深可以借助开发者工具来排查

qq_52161116
关注
【CSS笔记】CSS选择器的优先级（权重）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-20 3041
在CSS里面，如果有多个选择器作用在同一个元素上面，那么会按照上面的优先级顺序进行样式的选取，也就是优先级越高，浏览器最终就显示哪种样式。通过上面五个选择器的权重值，就可以计算出任意组合的权重值了，权重值就是将所有的权重相加。对于哪些组合选择器，我们可以通过计算选择器的权重来查看优先级，权重越大，优先级越高。
【CSS】CSS选择器权重
Jamcy123的博客
04-27 465
伪元素和外层标签取到的不是同一个元素！
css中媒体查询不生效的原因
hwm75的博客
02-17 569
缺少空格 优先级
这可能是最全的总结：css 媒体查询@media 不生效的原因
最新发布
weixin_57818879的博客
05-16 1140
css 媒体查询@media 不生效的原因，不仅介绍了重灾区样式覆盖问题，还介绍了标签，环境匹配，仿真设备等因素
css：viewport解决@media媒体查询不生效
彭世瑜的博客
11-02 1479
<!-- 注意这个配置必须要有 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .container { display: block; } /* 手机端隐藏效果*/ @media only screen and (max-width: 768px) { .container { display: block; } }
关于css媒体查询不起作用的解决方法
nuanpang的博客
06-03 5097
1、关于媒体查询：在网页制作中，利用@media screen实现网页布局的自适应，匹配不同访问设备。这样无需插件和独立的手机主题，对移动设备友好，能够适应各种窗口大小。2、可能的原因：（1）首先确认是不是css本身的问题，而不是媒体查询没有生效。 比如 div{display:flex;} 如果写入了此代码，那么div所有的display效果都将无法生效； （2）格式书写错误and后面必须有空格，例如下面代码： /*屏幕小于640px时的样式*/ @media screen and (max-width:
前端css媒体查询不生效问题和如何使用案例最新(源码全)
m0_49714202的博客
05-19 2060
目录一. 不生效问题总结1. 语法里面`screen ` 和`and`前后都有空格2.引入meta标签语句(1)原生html引入方法(2)vue项目引入方法3.择器的权重问题（样式被覆盖）(1)相同class名写在下面的权重高于上面的权重，所以样式会覆盖上面的(2)html引入link标签样式(3)css选择器权重可以百度一下(4)样式后面加`!important`可以增加权重例如下面二. 媒体查询的使用1.首先引入meta标签兼容移动设备（手机、平板），上面已经有步骤2.参数解释：3. 兼容IE8，需要加
对CSS选择器权重的认识(亲测)
09-22
CSS选择器权重，又称CSS特异性，是CSS中用于判定不同选择器匹配规则权重的标准。当多个规则应用于同一个HTML元素时，浏览器将根据权重来决定最终哪些规则生效。下面是对CSS选择器权重的详细介绍，以帮助开发者更好地...
CSS中选择器的权重值的计算
09-24
总之，CSS选择器的权重值计算是CSS样式优先级的核心，理解并熟练运用这一机制能够帮助开发者更准确地控制页面的样式呈现。在编写CSS时，应尽量避免过多依赖`!important`，保持代码的可读性和可维护性。希望这些信息...
CSS选择器的权重与优先规则分享
09-24
总之，掌握CSS选择器的权重和优先规则对于编写高效且可维护的样式表至关重要。这不仅可以帮助开发者精确控制页面的样式，也能在解决样式问题时提供清晰的思路。在实践中不断练习和应用这些规则，将成为优化网页设计...
关于css媒体查询无错误但是不加载问题
weixin_40785842的博客
03-27 1005
听说大佬都在写博客，所以我也要写博客，一方面记录一下自己成长的过程，另一方面我也想成为大佬！好了开始说正题：首先先看一下错误的媒体查询写法： 注意我画圈的地方。再看一下正确的写法：。注意到没有，and后面需要空格。好了问题解决，细节问题以后注意就是了！...
关于css媒体查询中的选择器权重的问题
qq_45279180的博客
11-28 1053
@media中的选择器的优先级 今天写响应式页面的时候发现了个问题在这里记录一下 .content .right-box { width: 240px; float: right; } 我写的页面是三栏式布局.在内容盒子里面我分成了左右两个盒子,上面的代码是我对内容盒子的右盒子设置的样式,我想的是做成响应式后左后盒子不再左右分布而是上下分布,所以我的媒体查询代码如下: @media screen and (max-width:980px) { .right-box{ float: none;
CSS媒体查询“@media”在调试中切换移动设备时不起作用。
m0_57927664的博客
04-30 2363
今天在学习CSS响应式网页设计中的媒体查询，遇到个有趣的问题，主要就是在调试过程中切换移动设备和电脑，同样的代码将有不同的结果。在切换移动设备调试时@media对于"max-width=979px"及以下的设置失去作用。（主要的疑问，在 max-width>=980px 的设置时，它是有作用的） 首先这段是我代码的关键语句。 <style> @media only screen and (max-width:979px){ body{ background-color:li
【CSS】@media媒体查询无效
哈哈哈
04-14 2133
用@media媒体查询写的CSS样式无效 1.问题 用@media媒体查询写的CSS样式对html无效。 2.解决 尝试一： ‘and’ 和 ‘(’ 之间要有空格 @media screen and (max-width:768px){ body { padding-top:150px; padding-bottom: 20px; } } 尝试二：保证htm...
CSS媒体查询及其使用
weixin_30361753的博客
02-04 275
准备工作1：设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： html 代码 1 <name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scal...
关于media媒体查询不生效的问题原因总结
热门推荐
一个在全能之路上越走越远的男人。
08-12 2万+
1.and  后面一定要有空格~~~  切记 2.meta 里面需要加上一句话： &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt; 3.代码写错了，选择器写错了，样式备覆盖了·等等低级问题，可以先在里面，写个简单的并...
css的mediaquery查询几种不生效的原因
qq_37558379的博客
06-30 6460
今天上午搞了半个小时，在webstrom中修改了css样式，用chrom浏览器浏览不生效，在网上查了半天，看是不是webstrom的有写保护，或者chorm浏览器不支持，最后发现少and后面少了一个空格导致css mediaquery查询不生效，即使在chrom中的network中css样式文件已经被加载了。@media screen and 不起作用原因汇总。首先确认是不是css本身的问题，而不...
CSS3媒体查询
小郑的博客
01-23 5569
所谓的媒体查询就是指，不同的条件使用不同的样式或样式集合。 写在前面，注意的几个问题： 1.device-width 和 width的区别： device-width表示的是设备的宽度，即屏幕的宽度。width所代表的是文档宽度，与屏幕大小没有关系，如果是在移动设备上，width表示的是布局视口的宽度。 2.必要的空格。 //空格是有必要的，在某些情况下该样式永远不起作用。 link
@media 媒体查询不起效果的原因
weixin_43964148的博客
03-10 5710
今天早上高高兴兴学小bootsrap，可是到了媒体查询，死活没效果，如图是我写的代码 可是效果是这样的*（默认颜色为黑色） 于是向群里大佬询问，大佬一语道破 * ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值