addClass() 工作，但它有一个 css 优先级问题

Question

所以我想在另一个 class 中添加 addClass() 但这不能正常工作。

在 scss 我有：

body {
 main {
   section.theory {
    position: absolute;
    width: 100vw;
    height: calc(100vh - 100px);
    top: 100vh;
    background-color: $white;
    box-shadow: 0px -5px 5px #cfcfcf;
    overflow: hidden;
   }
 }

 .J-bigSection-visible {
   top: 100px;
 }      
}

在 javascript 我有：

$('#theory-trigger').on('click', function(){
   $('section.theory').addClass('J-bigSection-visible');
});

当我看到页面源时，DOM 读取函数并添加 class，但未应用 css。它出现下划线，所以 top:100vh 保留。

如果我写 .css({'top':'100px'});在 jQuery 上它可以工作，但在这个项目中我只想留在 css 上。我究竟做错了什么？ :/

Answer 1

你做的 CSS 错了。

body main section.theory 比 body .J-bigSection-visible

更具体

尝试 section.J-bigSection-visible 并将其移动到 main 块内 - 这将具有相同的特异性，并且由于它稍后出现在 sheet 中，它将被覆盖。

在更一般的情况下，如果此类修复不可用，您可以考虑使用 top: 100px !important; 强制覆盖。

Answer 2

在您的 SCSS 中，您需要将 .J-bigSection-visible {top: 100px;} 移动到 section.theory 块内。这将添加必要的特异性。

SCSS

body {
 main {
   section.theory {
    position: absolute;
    width: 100vw;
    height: calc(100vh - 100px);
    top: 100vh;
    background-color: $white;
    box-shadow: 0px -5px 5px #cfcfcf;
    overflow: hidden;

    &.J-bigSection-visible {
      top: 100px;
    } 
   }
 }     
}

编辑：回答两个评论问题。

第一个问题，可以用同一个class。您只需更改 SCSS 即可反映这一点：

SCSS

body {
     main {
       section.theory {
        position: absolute;
        width: 100vw;
        height: calc(100vh - 100px);
        top: 100vh;
        background-color: $white;
        box-shadow: 0px -5px 5px #cfcfcf;
        overflow: hidden;

        &.J-bigSection-visible {
          top: 100px;
        } 
       }
       section.practice {
        position: absolute;
        width: 100vw;
        height: calc(100vh - 100px);
        top: 100vh;
        background-color: $white;
        box-shadow: 0px -5px 5px #cfcfcf;
        overflow: hidden;

        &.J-bigSection-visible {
          top: 100px;
        } 
       }
     }     
    }

第二个问题：是的，您可以 addClass 到具有 ID 的元素。您只需要将 jQuery 更改为 $('#elementWithID').addClass('yourClass');

注意： 这将为您的元素添加一个 CLASS，因为您的元素只能有一个 ID

addClass() 工作，但它有一个 css 优先级问题

addClass() work but it has a css priority issue

css

jquery

addclass

priority-queue