2

我想使用 CSS 选择至少有 N 个子节点的节点。如何？

目的是在树中应用色带（“指南”），但前提是父节点下方有六个或更多节点。

我得到的 JS、JQuery 和服务器端脚本建议有些问题，因为大多数子项是使用 Ajax 调用动态加载的。我必须破解注入孩子的代码，以便能够为那些有 6 个以上孩子的父母添加一个班级。这就是为什么在我努力编写代码之前，我想问是否有一种纯 CSS 方法可以做到这一点。不管孩子人数多少，我都可能只是满足于绑扎——虽然不够整洁，但足够公平。

4

4 回答 4

1

我建议使用 jQuery if 语句来计算节点，然后添加一个类来应用你想要的样式。

这是一个工作示例：http: //jsfiddle.net/WarrenBee/YeJyy/5

$(document).ready(function() {

    var nodeCount = $('.node').length;

    if( nodeCount > 6 ) {
        $('.node').addClass('nodeStyles');
    }

});
于 2013-01-30T21:23:48.610 回答
1

好吧，css3 有一些可以完成这项工作的子选择器。

li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
    ... some style
}

这个解决方案的功劳归功于发现它的 André Luís。当然它不适用于父元素，因为那是 css4 并且还不支持。li但是如果有 6 个标签，或者只是第一个标签，您可以设置所有标签的样式li。

结合 before 伪元素，您可以在视觉上制作父样式。ul 得到的position:relative. 然后你可以用伪元素在父级上伪造样式：

li:first-child:nth-last-child(6):before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:400px;
  height:20px;
  background:green
}

并非每个浏览器都支持 css 选择器 nth-last-child，但对于 Internet Explorer，您可以使用 javascript 或 IE7.js。祝你好运。

于 2013-01-30T21:41:51.447 回答
0

这在严格意义上是不可能的，因为 CSS 没有提供任何基于子级属性选择父级的方法。

对于严格的 CSS 解决方案，我会向父元素添加一个类，并设置该类的样式。您可以在服务器端以编程方式处理它，而不是在必要时手动添加类。

您当然可以使用 JavaScript 来完成此操作，并且许多可用的 JavaScript 库将简化该过程。

于 2013-01-30T21:26:52.530 回答
0

CSS 还没有任何类型的父选择器。

但是，您可以使用 JavaScript 来执行此操作。以下是一个jQuery示例（小提琴）：

HTML

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

JavaScript：

jQuery(function($){
    $('ul').each(function(){
        if($(this).children('li').length >= 6){
            $(this).css('background-color', 'orange');
        }
    });
});
于 2013-01-30T21:33:36.770 回答