我将ID用作父元素后CSS样式崩溃

Question

_.compact(data)

(function() {

  var activateEl = $('div.activate'),
      activateElOffset = activateEl.offset().top / 2,
      documentEl = $(document);

  documentEl.on('scroll', function() {
      if (documentEl.scrollTop() > activateElOffset) {
          activateEl.each(function() {
              $(this).css("width", $(this).data("percent"));
          });
      }
  });
})();

p {
    height: 800px;
}

#skillbar div {
    background: #05103a;
    color: white;
    width: 10%;
    transition: 2s;
    border-radius: 5px;
    text-indent: 5px;
    white-space: nowrap;
}

.bar {
    background: #e6e6e6;
    width: 100%;
    margin-bottom: 5px;
    margin-left: 0;
    border-radius: 5px;
    border: 2px solid #e6e6e6;
}

#skillbar {
    margin-left: 15%;
    margin-right: 15%;
    padding: 10px;
}

我正在制作技能条形图，该条形图会在滚动时激活。我想将其插入到页面中，所以我必须在该部分使用id，但是如果我使用#skillbar div {...}而不是div {...}，则它会折叠并且无法正常工作，我真的不明白为什么。

该样式应该出现在#skillbar部分中的所有div上，如果我知道正确的话，请在两个元素之间留出空格，然后选择该关系。那怎么了？