CSS特异性节拍与一致！重要的

CSS specificity beat inline with !important

本文关键字：重要的 特异性 CSS      更新时间：2023-09-26

这是我的网站：http://stage.samkeddy.com/

它使用几个媒体查询和一个由javascript驱动的移动菜单按钮进行响应。

以下是菜单按钮的javascript：

function toggleMenu () {
    if (menuIsVisible == false) {
        collapsibleMenu.style.height = 'auto';
        content.style.paddingTop = '290px';
        menuIsVisible = true;
    }
    else {
        collapsibleMenu.style.height = '0';
        content.style.paddingTop = '80px';
        menuIsVisible = false;
    }
}

所以你可以看到，我需要调整内容div顶部的填充，以抵消菜单

但是，如果将大小调整为移动大小，打开菜单，然后将大小调整回桌面大小，则媒体查询不会修复填充，因为javascript仍然有内联样式。我试着在桌面版上做填充！重要的是，但调整大小时填充仍然不会改变，即使根据这个！重要节拍内联。

你可以自己测试，打开大小（应该是什么样子），调整到移动宽度（导航将消失，你会看到菜单按钮），点击菜单按钮（保持菜单打开），然后将网站调整回桌面宽度。你会看到填充物仍然存在。如果你检查它，你可以看到原来的填充被划掉了，有利于内联样式。

我知道用javascript监控宽度并设置填充可以做到这一点，但我真的不想这么做，也不认为我应该这么做。

EDIT：已解决

首先，我应该添加类，而不是用javascript添加CSS。

然后我假设推杆！媒体查询之外的重要内容将使其只显示在桌面上，但它接管了所有媒体查询。因此，只将其放入查询中就可以了。请注意，如果我使用两个单独的菜单（移动/桌面），我就不需要这个了，但由于它是固定的，#内容需要填充，所以必须这样做。但使用这种技术，你也可以只使用一个菜单，但可以用这种方式来调整菜单的高度。我已经用代码笔演示了这项技术：http://codepen.io/anon/pen/JFvay

将此代码添加到样式表中应该可以解决问题，我刚刚使用开发工具在您的网站上尝试过，它正在工作：

@media only screen and (min-width: 643.2px) {
    #content {
        padding-top: 80px !important;
    }
}

尽管我强烈建议您为移动设备创建一个单独的导航菜单，并使用@media查询来显示它。

您的核心问题是混合了CSS和内联样式。一般来说，无论是在HTML中，还是通过使用element.style.<property> =或通过jQuery的.css()功能，都应避免将特定的CSS属性直接放置在元素上。相反，您应该使用类将您想要的属性定义为CSS规则：

#collapsible-menu                       { height: auto;  }
#content                                { padding-top: 290px; }
#someelt.menu-visible #collapsible-menu { height: 0; }
#someelt.menu-visible #content          { padding-top: 80px; }

其中CCD_ 3是某种更高级别的祖先元素。然后，你的JS就变成了

function toggleMenu() {
    document.getElementById('someelt').classList.toggle('menu-visible');
}

如果您的目标浏览器不支持classList（请参阅CanIUse），jQuery会提供自己版本的类切换。

CSS不是一种命令式语言，但如果你愿意，你可以把上面最后两条规则的#someelt.menu-visible部分想象成一种if语句："如果菜单可见，则将collapsible-menu缩小到零高度"等等，#someelt的menu-visible类的存在可以被认为是一种布尔"变量"。最有可能的是，您将不再需要JS中的相应变量。

不管怎样，这样做的好处是，查看代码的人只需查看CSS文件，就可以看到所有与CSS相关的逻辑，而不必同时查看CSS和JS，并且您可以在一个地方更改与CSS有关的内容。

相关文章：