::第一線的僞元件（未顯示）

我有這個下面的代碼：::第一線的僞元件（未顯示）

<div id="slide1">    
    <span id="tf1">BUILDING WEBSITES<br>BLABLABLABLA</span> 
    </div>

這個CSS：

#tf1 { 
color: #505050; 
text-shadow: #a8a8a8 -2px 1px 0px; 
font-size: 40px; 
font-family: Arial, Helvetica, sans-serif; 
} 
#tf1::first-line { 
color: #FFFFFF; 
text-shadow: #000 1px 1px 1px; 
font-size: 60px; 
font-family: Arial, Helvetica, sans-serif; 
} 
#slide1 { 
position: absolute; 
padding: 20px; 
width: 700px; 
}

一切似乎沒什麼問題;除了:: first-line沒有出現，並且所有內容都在我的CSS代碼的＃tf1部分中編碼出現的事實。

什麼是凌駕於此？或者如果我的代碼中有錯誤？

來源

2014-04-21 belthazorNv

您需要添加：

#tf1 { 
    display: block; 
}

因爲span具有默認display: inline風格，並從docs約::first-line：

第一條線只在一個塊容器盒的意思，因此， :: first-line僞元素只對塊的顯示值爲的元素有效，inline-block，table-cel l或表格說明。在所有其他情況下，::一線不起作用。

Updated Fiddle

來源

2014-04-21 06:38:14 Felix

或者，使用'div'代替'span'。在這裏使用'span'似乎沒有什麼好的理由。 –

::first-line只使用塊風格的元素。一個span默認是內聯的，所以整個事情就是「一行」，就像它是一個連續的行，它只是繼續前進，並在遇到邊界時進行包裝。

您可以設置span到display: block;得到::first-line工作：

http://jsfiddle.net/hwmWv/

#tf1 { 
    display: block; 
}

來源

2014-04-21 06:38:38 Ming

感謝您的解釋:)非常感謝:) – belthazorNv

這個僞元素只能在塊級元素（當顯示設置爲塊，內聯塊，表格標題，表格單元格）。如果設置在內聯元素上，即使該內聯元素在其中有換行符，也不會發生任何事情。

#tf1 { 
color: #505050; 
text-shadow: #a8a8a8 -2px 1px 0px; 
font-size: 40px; 
font-family: Arial, Helvetica, sans-serif; 
display: block; /* assign display property value*/ 
}

source

來源

2014-04-21 06:40:56

::第一線的僞元件（未顯示）

回答

相關問題