设计“一线”内部元素答案

【问题标题】：Styling 'first-line' inner elements设计“一线”内部元素
【发布时间】：2013-07-02 16:25:43
【问题描述】：

我正在尝试将 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 解决方案，否则这里的问题是“为什么”，而不是“如何”或“是否可能”。

【问题讨论】：

你可以在页面上使用 Javascript 吗？
是的，我可以使用 JS 解决方法来解决这个问题，但这不是我在这里要问的。如果不能用 CSS 解决，我很好奇为什么。
因为 CSS 对元素当前位置不敏感，只设置它们。希望我的回答能帮到你。

标签： css css-selectors pseudo-element

【解决方案1】：

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

selectors 3 spec 更新了一点。以下内容来自于此。

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

ul:first-line > li

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

ul:before + li

...组合器（> 或 +）只查看“元素”而不是“伪元素”进行选择。第二个字符串不以ul 的“第一个”li 为目标，它跟在:before 伪元素之后。如果它要工作，它会定位在 html 序列中的 ul 之后的 li（当然，在有效的 html 布局中永远不会有一个）。

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

每个选择器只能出现一个伪元素，如果存在的话必须出现在代表选择器的主题。

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

【讨论】：

有趣，有点道理。很容易将before 伪元素视为<li><li:before>1.</li:before>First element</li>，但当其中有额外元素时，我很难以同样的方式看到first-line。
我猜可以想象成<ul><li><ul:first-line>LoremIpsum</ul:first-line></li><li><ul:first-line>dolor</ul:first-line> sit amet</li>...
看到这个类似的概念，但相反：Can I target an :after pseudo-element with a sibling combinator?
是与否。它更复杂，因为background-color 就像<ul><ul:first-line><li>...</li><li>etc...</li></ul:first-line></ul>，但不承认那些真正的<li> 与它相关。它真正涉及的是恰好在那些li 元素中的“文本”的开头和结尾。因此，您可以在ul:first-line 上设置您的color 属性，li 中的 text 的颜色将通过正常继承将其拾取，但您无法获得 background 的li 本身要继承，因为 ul:first-line 背景影响文本而不是 li。

【解决方案2】：

我认为你会更好：

ul > li:first-child

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

【讨论】：

这只会设置第一个元素的样式，而不是第一行的每个元素！
在这种情况下，我认为您需要某种形式的 JavaScript 解决方案，我认为 CSS 不会在这里为您提供帮助

【解决方案3】：

为第二行创建一个类的唯一选择是通过 Javascript 为它们添加一个具体的类名并为它们设置背景。要获取当前行，您应该迭代元素并将其与列表顶部的距离以及它之前的兄弟元素进行比较。我制作了一个 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;
}

【讨论】：

我没有分叉，现在没关系

【解决方案4】：

很确定 :first-line 应该应用于包含文本的元素本身（而不是像你一样的父元素）。

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

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

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

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

【讨论】：