如何在 CSS 和 MooTools 中仅定位直系子代？

CSS 选择器仅定位直接子元素而不是其他相同的后代

使用嵌套元素时，通常需要定位直接子元素并排除共享的其他后代元素相同的班级或 ID。在 CSS 中，这可能很难实现。

选择器 ul > li 仅针对

的直接子代元素，不包括任何嵌套的
• 元素子列表中的元素。这对于设置顶级列表项的样式非常有用，同时使嵌套项不受影响。例如：

  #parent > li {
    color: red;
  }

  但是，需要注意的是，IE6 不支持此选择器。为了保持向后兼容性，解决方法是使用以下方法：

  #parent li { /* style appropriately */ }
  #parent li li { /* back to normal */ }

  MooTools 特定问题：

  在您提供的 MooTools 代码中， getElementsByElelements()方法包括直系子代和后代。要仅定位直接子元素，请使用 getChildren() 代替：

  var drop = function(el){
      el.getParents('ul').reverse().each(function(item){
          var posCount = 1;
          item.getChildren("li").getElements("a span[class=position]").each(function(pos){
                  pos.set('text', posCount);
                  posCount++;
          });
      });
  }

  通过使用 getChildren()，您可以确保编号仅限于每个嵌套

  的直接子元素，从而解决您遇到的问题。

以上是如何在 CSS 和 MooTools 中仅定位直系子代？的详细内容。更多信息请关注PHP中文网其他相关文章！