html - 如何匹配不包含另一个标签的标签?

标签 html css css-selectors less

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

已更新,据我所知我的问题具有误导性,我明确添加了完整范围(对此感到抱歉)。

fiddle 是http://jsfiddle.net/stephanedeluca/v7nxB/

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>

目前的CSS(实际上是lessCSS代码)如下:

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

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

它产生的结果如下:

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.

一级还行,二级不是我想要的

二级应该如下,一级保持不变:

   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.

如您所知,一旦 CSS 起作用,我将用空字符串替换 (final end)。

有什么想法吗?

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

最佳答案

你需要这样的东西,

检查这个 demo jsFiddle

结果

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% 有效

关于html - 如何匹配不包含另一个标签的标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23427173/

相关文章:

html - 排除样式表

仅当元素具有两个类时才应用 CSS 规则

html - 什么是CSS中没有点的点

html - 在 Google Chrome 和 Mozilla 中使用 css3

html - 部分填充和边框 overflow hidden : hidden;

html - 尝试在 div 中平均分配元素以填充之间的空间

css - 在 div 内部移动以最小化屏幕宽度

HTML 标题元素边框淡化

java - 如何将 css 样式设置为 GWT TextBox 文本?

javascript - 我的 gulp.js 文件没有在浏览器上更新我的 css