Question

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

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

我是否忽略了我指定样式的方式，这是CSS实现中的疏忽还是故意的CSS规范？如果是后者，那背后有一个很好的理由吗？

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

修改
请注意，似乎非常明确，目前无法单独使用CSS实现这一目标，但从研究的角度来看，对后人来说，我很好奇为什么会这样。如果您阅读W3C CSS specification on the firstline pseudo-element，则似乎没有提及内部元素。感谢大家尝试提供替代解决方案，但除非确实有CSS解决方案，否则这里的问题是“为什么”，而不是“如何”或“可能”。

Answer 1

这是“为什么”你想做的事无法完成

selectors 3 spec更新了一些。以下是从中获取的。

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

ul:first-line > li

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

ul:before + li

...组合子（无论>还是+）仅查看“元素”而不是“伪元素”进行选择。第二个字符串不会定位li伪元素后面的ul的“第一个”:before。如果它可以工作，那么它将定位在html序列中li之后的ul（当然，在有效的html布局中永远不会有一个）。

然而，a selector string similar to the second one above would not work anyway，因为实际上，上述字符串的形式无效，正如the specifications中的声明所证实的那样：

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

换句话说，伪元素只能在选择器序列中定位 dead last ，因为它必须是所分配属性的目标通过那个选择器。显然只会忽略非有效形式，就像任何无效的选择器一样。

Answer 2

我认为你会更好：

ul > li:first-child

:first-line仅对文字元素

有用

Answer 3

为第二行创建一个类的唯一选择是通过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;
}

Answer 4

非常确定:first-line应该应用于包含文本的元素本身（而不是父元素）。

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

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

标签或其他类似内容......

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

造型'一线'内在元素

4 个答案:

这是“为什么”你想做的事无法完成