p.class:first-line 不起作用答案

【问题标题】：p.class:first-line does not workp.class:first-line 不起作用
【发布时间】：2015-08-23 06:50:37
【问题描述】：

我正在尝试使用 :first-line 伪选择器，但它似乎不起作用，我不知道为什么。我也尝试过使用 ::first-line 但无济于事。（注意，这与边界半径无关）。

p.intro:first-line {
  text-transform: uppercase;
}

<p class="intro">Instead of attempting to cover the full range of <abbr title="Cascading Style Sheets">CSS</abbr> selectors, I think it makes sense to begin with a subset of the most widely supported. The <a href="http://www.quirksmode.org/css/contents.html">compatibility charts compiled by Peter-Paul Koch</a> provide
  detailed support information.</p>

【问题讨论】：

看起来不应该行不通？ jsfiddle.net/9wrubwc2
@Anonymous 事实上MDN中有一个例子使用text-transform: uppercase...
@DenysSéguret 你是对的，我的错。我想我阅读了“颜色属性，所有与背景相关的属性”部分并假设不包括文本转换。
奇怪的是，检查器显示实际的 HTML 是大写的，并且在 css 部分中找不到 :first-line
用 background-color 替换它似乎有效。似乎是一个怪癖或错误，因为据我从文档中看到text-transform 也应该适用。

标签： css

【解决方案1】：

我只在 Chrome 中看到这个问题。显然还有一个bug尚未修复：https://code.google.com/p/chromium/issues/detail?id=129669

SO post 中提出了一种解决方法，它说您可以使用 https://github.com/octopi/Linify 来使用 jquery 插件来获得效果。本质上，使用 linify 选择第一行，然后将text-transform: uppercase 的属性应用于第一行。

【讨论】：

我也在 Opera 和 Safari（在 Mac 上）中尝试过。不工作。它确实在 Firefox 中工作。 Webkit 错误？
@Steven 他们都使用相同的网络引擎（webkit，blink），因此有相同的错误。改用 Firefox 或 IE
@steven 我在最新版本的 Firefox (Win 7) 上运行了 sn-p，它按预期工作。
@Steven 它在 Firefox 中为我工作。我认为 WebKit 是这里的问题。
MDN 文章确实补充说，在工作草案中选项受到限制，这可能会被删除