CSS工作内联但不是样式表

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

1. 你的选择器错了。那实际上是在.nav-child里面找到一个.mega-dropdown-menu元素，在.dropdown-menu里面，在.tb-megamenu-submenu.中你应该删除选择器中的空格：

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

2. 请不要使用!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; 
}