Question

我已经阅读了有关该主题的所有其他文章，但似乎没有帮助。

当我有：

.tb-megamenu-submenu .dropdown-menu .mega-dropdown-menu .nav-child{
    left:50% !important;
}

它不会将样式添加到元素中。

但是如果我将其内联使用，它会起作用：

<div data-class="increase-background-about" data-width="0" class="tb-megamenu-submenu increase-background-about dropdown-menu mega-dropdown-menu nav-child" style="left:50px">

我完全迷住了，其他问题都没有帮助。

Answer 1

删除所有空格，然后尝试。应该可以！

.tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child{
    left:50% !important;
}

样式的问题是，您提到的所有类都针对同一元素。

因此，要针对他们，您需要像我上面所做的那样-没有空格。当这些类是后代时，您的样式将起作用

即 .tb-megamenu-submenu-> .dropdown-menu-> .mega-dropdown-menu-> .nav-child

箭头表示父子关系。

从here了解CSS的基础知识。

Answer 2

您的选择器错误。那实际上是在.nav-child内，.mega-dropdown-menu内，.dropdown-menu内寻找.tb-megamenu-submenu.元素，您应该删除选择器中的空格：
```
.tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child{
    left: 50%;
}
```
请不要使用!important。这使您的代码很难维护。相反，尝试编写更具体的选择器（顺便说一句，这应该足够具体）。

Answer 3

您正在尝试通过多个类指定元素，对吗？但是，通过在选择器之间放置空格，您实际上可以得到后代：

.tb-megamenu-submenu
   . dropdown-menu
       .nav-child <- getting this element

要获得正确的结果，您应该将.classes置于无空格的位置，例如：

.tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child { 
    left:50% !important; 
}

CSS内联工作，但不是来自样式表

3 个答案: