css - 响应式导航链接不会对类使用react

Question

我正在网站上工作 simplemedia.dk

我有一个有效的响应式菜单，但是当我尝试在响应式模式下定义

时，浏览器无法识别样式..

在响应模式下，我得到一个名为“responsified”的类，我尝试在我的导航样式前面添加 .responsified 类，但它没有对此使用react。

.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled #navigation ul.menu {
    display: block;
    float: left;
}

.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled #navigation ul.menu li {
    display: block;
    float: left;
}

在正常模式下我希望它显示表格单元格，但在响应模式下我希望它显示 block 。

Answer 1

当你像这样在你的 CSS 选择器中使用长空格分隔的字符串时......

.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled

...你告诉浏览器“给我找一些 .responsive-toggled 类的东西，它有一个父类 .responsified ，它又有一个父类 .absolute ，它又有一个父类class .responsive-menus-0-0...”等等

在您的实际页面中，上面列出的所有这些类都应用于单个元素。

在 CSS 中，要定位具有多个类的元素，您可以将它们链接起来(无空格):

.responsive-menus.responsive-menus-0-0.absolute.responsified.responsive-toggled

但这几乎肯定是一种方式，比您在这种情况下需要的方式复杂得多。

您的情况可能不需要比这更具体的了:

.responsified #navigation ul.menu {
    display: block;
    float: left;
}

.responsified #navigation ul.menu li {
    display: block;
    float: left;
}