html - 获取css工作的伪元素属性..更改第一行的属性

Question

我正在尝试更改一个大句子的第一行的 css 属性，我正在通过使用 color 属性进行试验，我有一个 html 元素

<span class="tripname_heaing">Where Hummus All Began: Jasdasdasddasdasdasdasdadasdasdasdasdsadsadasdasdordan &amp; Issdassasdsadsadsadrael</span>

和 CSS 属性

.span.tripname_heaing:first-line {
color: red
}

span.tripname_heaing{
 color: blue
}

span.tripname_heaing {
  font-size: 24pt;
  font-weight: normal;
  line-height: 24pt;
  margin: 0;
  padding: 0;
}

但是伪元素属性不适用于上述语法。我正在添加一个小提琴来展示演示。这有什么问题？

http://jsfiddle.net/X33pY/126/

并进行编辑以显示功能 http://jsfiddle.net/X33pY/126/

Answer 1

::first-line伪元素不适用于内联元素；来自选择器级别 3：

在 CSS 中，::first-line 伪元素只有在附加到块状容器（例如块框、行内块、表格标题或表格单元格）时才能生效。

您可以改为使用 a或更改- http://jsfiddle.net/X33pY/127/<p>的显示值<span>

Answer 2

You had a lot of problems like color: red, it should be color: red;

You also had to add display: block; to the main container since it is a span tag, these are not block elements.

.tripnameHeaing {
  font-size: 24pt;
  font-weight: normal;
  line-height: 24pt;
  margin: 0;
  padding: 0;
  color: blue;
  display: block;
}

.tripnameHeaing:first-line {
  color: red;
}

jsfiddle with answer