獲取css工作的psuedo元素屬性..更改第一行的屬性

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僞元素並不適用於行內元素;從Selectors Level 3：

在CSS中，所述::一線僞元素只能有一個效果時 附接到塊狀容器如塊框，內聯塊， 表字幕，或表格單元格。

您可以改用<p>或改變的<span>顯示值 - http://jsfiddle.net/X33pY/127/

Answer 2

你有很多的問題，像color: red，它應該是color: red;

你也不得不添加display: block;到主容器，因爲它是一個跨度標籤，這些不是塊元素。

.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