代码之家 › 专栏 › 技术社区 › mz1378

如何防止在较低宽度的媒体查询中继承规则

css

mz1378 · 技术社区 · 3 年前

我在上面的查询中有一条规则:

@media (max-width: 3000px) { 

    .dropdown-w:hover .dropdown-content-w {
        display: block;
    }
}

在此媒体查询中继承的:

@media (max-width: 767.98px) {
  
      /*.dropdown-w:hover .dropdown-content-w {
      
      }*/

    .dblock {
        display: block;
    }
}

因为在较低宽度的媒体查询中,我使用“单击”来显示阻止悬停的元素。但悬停会覆盖单击行为。如何使该规则不被继承?

1 回复 | 直到 3 年前

Geeky Quentin 3 年前

像 767.98px 不到 3000px ,每个屏幕尺寸小于 3000像素 应用于这些媒体查询。同样的事情也在这里发生。像 767.98px 不到 3000像素 ,应用媒体查询。不适用于小于 767.98px ,修改您的媒体查询

@media (min-width: 767.98px) and (max-width: 3000px) {
    .dropdown-w:hover .dropdown-content-w {
        display: block;
    }
}

现在,屏幕尺寸小于 767.98px 不会继承上述属性,因为它们根本不适用于下面的屏幕大小 767.98px ..

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前