造型'一线'内在元素

Question

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

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

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

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

编辑:
请注意,似乎非常明确,目前无​​法单独使用CSS实现这一目标,但从研究的角度来看,对后人来说,我很好奇为什么会这样.如果你在firstline伪元素上阅读W3C CSS规范,似乎没有提到内部元素.感谢大家尝试提供替代解决方案,但除非实际有CSS解决方案,否则这里的问题是"为什么",而不是"如何"或"可能".

Answer 1

这是"为什么"你想做的事情无法完成

在选择3规格是多一点是最新的.以下是从中得到的.

"为什么"是因为:first-letter是伪元素,即"假"或"假"元素.它产生了一个" 虚构的标签序列 ",与其他真实元素无法识别.所以你...

ul:first-line > li 

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

ul:before + li

......当组合子(是否>或+)只在寻找可供选择的"元素",而不是"伪元素".第二个字符串不是以伪元素后面的"第一个" li为目标.如果它是在所有的工作中,将针对一个跟随在HTML序列(其中,当然,永远不会有一个HTML页的有效布局).ul:beforeliul

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

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

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