7

我试图将 CSS 样式放在列表第一行的列表项上，但似乎 Chrome、Firefox 和 Safari 都不会接受该样式。

ul:first-line > li {
    display: inline;
    /* my styles here */
}

我是否忽略了指定样式的方式，这是对 CSS 实现的疏忽还是故意的 CSS 规范？如果是后者，这背后是否有充分的理由？

JSFiddle：http: //jsfiddle.net/e3zzg/

编辑：
请注意，目前仅使用 CSS 无法实现这一点似乎非常明确，但从研究的角度来看，为了后代，我很好奇为什么会这样。如果您阅读关于伪元素的W3C CSS 规范，firstline似乎没有提及内部元素。感谢所有尝试提供替代解决方案的人，但除非确实有 CSS 解决方案，否则这里的问题是“为什么”，而不是“如何”或“是否可能”。

4

4 回答 4

9

这是“为什么”你想做的事做不到

选择器 3 规范更新了一些。以下内容来自于此。

“为什么”是因为:first-letter是伪元素，即“假”或“假”元素。它正在产生一个“虚构的标签序列”，相对于其他真实元素无法识别。所以你的...

ul:first-line > li

...遇到与此选择器字符串相同的问题...

ul:before + li

...组合器（无论是>还是+）只查看“元素”而不是“伪元素”进行选择。第二个字符串不针对伪元素后面li的“第一个”。如果它要工作，它将针对html 序列中紧随其后的一个（当然，在有效的 html 布局中永远不会有一个）。ul:beforeliul

但是，与上面第二个类似的选择器字符串无论如何都不起作用，因为实际上，上述字符串的形式是无效的，正如规范中的声明所证实的那样：

每个选择器只能出现一个伪元素，如果出现，它必须出现在代表选择器主题的简单选择器序列之后。

换句话说，一个伪元素只能在选择器序列中的最后一个位置，因为它必须是该选择器分配的属性的目标。就像任何无效的选择器一样，无效的表单显然会被忽略。

于 2013-07-04T16:48:41.783 回答
2

我认为你会更好：

ul > li:first-child

:first-line仅对文本元素有用

于 2013-07-04T15:43:49.897 回答
0

为第二行创建一个类的唯一选择是通过 Javascript 为它们添加一个具体的 className 并为它们设置背景。要获取当前行，您应该迭代元素并比较它与列表顶部的距离以及它之前的兄弟姐妹。我制作了一个 jQuery 示例，以便您了解：http: //jsfiddle.net/JmqxM/

$("ul.numerize-lines").each(function () {
    var list = $(this);
    var currentDistance = 0;
    var currentLine = 0;

    list.find("li").each(function () {
        var item = $(this);
        var offset = .offset();
        var topDistance = offset.top;
        if (topDistance > currentDistance) {
            currentDistance = topDistance;
            currentLine += 1;
        }
        item.addClass("line-" + currentLine);
    });
});

和CSS：

ul li.line-2{
    background-color: #FFF;
}
于 2013-07-04T15:43:07.140 回答
0

很确定:first-line应该将其应用于包含文本的元素本身（而不是像您所拥有的父级）。

ul > li:first-line { /*style*/ }

或者，如果您的列表项包含

标签或其他类似的东西......

ul > li p:first-line { /*style*/ }
于 2013-07-04T16:15:57.540 回答