如何匹配不包含另一个标签的标签？

I want to style a ul/li differently when it does not contain another tag ul/li.

当它不包含另一个标签ul / li时,我想以不同的方式设置样式。

UPDATED as I understand my question was misleading, I added the full scope explicitly (sorry about that).

更新了,因为我理解我的问题是误导,我明确地添加了完整的范围(抱歉)。

The fiddle is http://jsfiddle.net/stephanedeluca/v7nxB/

小提琴是http://jsfiddle.net/stephanedeluca/v7nxB/

The html is as follows:

html如下:

Two-level nesting:

<ul>
    <li>Grain&nbsp;:
        <ul>
            <li>Baisse du rendement</li>
            <li>Sénescence plus rapide la plante</li>
            <li>Sensibilisation accrue à la fusariose des tiges</li>
        </ul>
    </li>
    <li>Baisse du rendement</li>
    <li>Sénescence plus rapide la plante</li>
</ul>

One level:
<ul>
    <li>Baisse du rendement</li>
    <li>Sénescence plus rapide la plante</li>
    <li>Sensibilisation accrue à la fusariose des tiges</li>
</ul>

The current CSS (lessCSS code actually) is as follows:

当前的CSS(实际上是较少的CSS代码)如下:

ul { 
    &>li {
        &:after {
            content: " ;";
        }
        &:last-child:after {
            content: ".";
        }

        &>ul { 
            li:after {
                content: " (end)";
            }
            li:last-child:after {
                content: " (final end)";
            }
        }
    }
}

The result it produces is as follows:

它产生的结果如下:

Two-level nesting:

   o Grain
    — Baisse du rendement (end)
    — Sénescence plus rapide la plante (end)
    — Sensibilisation accrue à la fusariose des tiges (final end)
    ;
   o Baisse du rendement ;
   o Sénescence plus rapide la plante.

One level:
   o Baisse du rendement ;
   o Sénescence plus rapide la plante ;
   o Sensibilisation accrue à la fusariose des tiges.

One level is ok, but the two-level is not what I want.

一个级别没问题,但是两个级别不是我想要的。

Two-level should be as follows while one-level stays still:

当一级保持静止时,两级应如下:

   o Grain
    — Baisse du rendement ;
    — Sénescence plus rapide la plante ;
    — Sensibilisation accrue à la fusariose des tiges.
    (final end)
   o Baisse du rendement ;
   o Sénescence plus rapide la plante.

As you may understand, I'll replace (final end) by empty string once the CSS works.

您可能已经理解,一旦CSS工作,我将用空字符串替换(最终结束)。

Any idea?

UPDATE 2: I just found an interim work around with the help of a class (not great, but it works) (the fiddle)

更新2:我刚刚在一个班级的帮助下找到了一个临时工作(不是很好,但它有效)(小提琴)

2 个解决方案

#1

You need something like this,

你需要这样的东西,

Check this demo jsFiddle

Result

o Grain
    — Baisse du rendement ;
    — Sénescence plus rapide la plante ;
    — Sensibilisation accrue à la fusariose des tiges.
    (final end)

CSS

ul { 
    &>li {
        &:after {
            content: " ;";
        }
        &:last-child:after {
            content: "(final end)";
        }

        &>ul { 
            li:last-child:after {
                content: " .";
            }
        }
    }
}

100% Worked

#2

There is an interim work around I've found which takes advantage of a separate class as follows:

我找到了一个临时工作,它利用了一个单独的类,如下所示:

Two-level nesting:

<ul>
    <li class="compact">Grain&nbsp;:
        <ul>
            <li>Baisse du rendement</li>
            <li>Sénescence plus rapide la plante</li>
            <li>Sensibilisation accrue à la fusariose des tiges</li>
        </ul>
    </li>
    <li>Baisse du rendement</li>
    <li>Sénescence plus rapide la plante</li>
</ul>

The class I named "compact" is there to tell not to apply the rules that handle ul/li suffix.

我命名为“compact”的类是告诉不要应用处理ul / li后缀的规则。

The CSS becomes as follows:

CSS变为如下:

ul { 
    &>li {
        &:after {
            content: " ;";
        }
        &:last-child:after {
            content: ".";
        }

        &.compact:after {
            content: "";
        }
    }
}

The inconvenient comes from the fact you need to add information to your data source which does not bear true semantic. But it works for now.

不方便的原因是您需要向数据源添加信息,这些信息不具有真正的语义。但它现在有效。

Hope someone might found a better way to proceed

希望有人可能会找到更好的方法来继续