为无指定子元素的div添加类遇问题：类被错误应用至所有header

踩过类似的坑，我来给你捋捋问题出在哪：你用if (linkCheck)来判断，但linkCheck是一个jQuery对象——哪怕没有找到任何匹配的.navigation元素，这个对象本身依然是“存在”的（属于真值），所以条件永远为true，自然会把类加到所有的.main-header上啦！

针对不同场景的解决方案 #

场景1：页面只有一组页眉和导航 #

如果你的页面里只有一个.main-header和对应的一个.navigation，只需要修改判断条件，用length属性确认是否存在符合要求的导航：

// 找到没有.nav-link子元素的.navigation
var linkCheck = $('.navigation').not(':has(.nav-link)');
// 只有当确实存在这样的导航时，才给页眉加类
if (linkCheck.length > 0) {
  $(".main-header").addClass("no-links-header");
}

场景2：页面有多个页眉，每个页眉对应自己的导航 #

如果页面里有多个.main-header，每个页眉下都有独立的.navigation，那需要逐个检查每个页眉对应的导航，只给符合条件的页眉加类：

// 遍历每个.main-header
$('.main-header').each(function() {
  // 获取当前页眉下的.navigation元素
  var currentNav = $(this).find('.navigation');
  // 检查这个导航里是否没有.nav-link
  if (!currentNav.has('.nav-link').length) {
    // 给当前这个页眉添加类
    $(this).addClass('no-links-header');
  }
});

你的CSS可以保持不变 #

.no-links-header {
  color: red;
  margin-bottom: -80px;
}

这样就能精准控制只有当对应导航没有.nav-link时，才给页眉添加样式类啦～

内容的提问来源于stack exchange，提问作者user5481714