css – 造型’第一线’内部元素

前端之家收集整理的这篇文章主要介绍了css – 造型’第一线’内部元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图将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解决方案,否则这里的问题是“为什么”,而不是“如何”或“可能”.

解决方法

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

selectors 3 spec是更新一点.以下是从中得到的.

“为什么”是因为:第一个字母是伪元素,即“假”或“假”元素.它产生了一个“虚构的标签序列”,与其他真实元素无法识别.所以你…

ul:first-line > li

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

ul:before + li

…组合器(无论是>或)仅查看“元素”而不是“伪元素”进行选择.第二个字符串不针对在伪元素之前的ul的“第一个”li.如果它可以工作,它将针对html序列中的ul后面的li(当然,在有效的html布局中永远不会有一个).

但是,a selector string similar to the second one above would not work anyway,因为实际上,上述字符串的形式无效,正如the specifications中的声明所证实:

Only one pseudo-element may appear per selector,and if present it
must appear after the sequence of simple selectors that represents the
subjects of the selector.

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

原文链接:https://www.f2er.com/css/242249.html

猜你在找的CSS相关文章