CSS - 第一字母的選擇不與ID工作

我的CSS：第一個字母的選擇適用於所有p元素，但有span有一個ID #fletter它不會工作...CSS - 第一字母的選擇不與ID工作

#fletter span:first-letter { 
    font-weight: 600; 
font-size: 25px; 
}

<span id="fletter">

選擇器正常工作與我的p元素，雖然。

p:first-letter { 
font-weight: 600; 
font-size: 25px; 
}

<p>Lorem Ipsum</p>

來源

2013-12-19 Claudio

看看這個問題http://stackoverflow.com/questions/7631722/css-first-letter-not-working – taintedromance

這是因爲:first-letter只能在塊級元素可以使用。

一種解決方案可能是顯示跨度爲塊級元素：

#fletter span { 
    display:block; 
} 

#fletter span:first-letter { 
    font-weight: 600; 
    font-size: 25px; 
}

jsFiddle here.

來源

2013-12-19 19:59:04 lifetimes

書面，你用id fletter靶向span的東西在裏面。你要麼需要做

#fletter:first-letter { 
    font-weight: 600; 
    font-size: 25px; 
    display: block; 
}

，或者，如果你知道這將永遠是一個span：

span#fletter:first-letter { 
    font-weight: 600; 
    font-size: 25px; 
    display: block; 
}

來源

2013-12-19 19:59:23 aelfric5578

我都嘗試，沒沒有工作。 – Claudio

如果您需要使用'span'而不是'p'，'div'，標題等，您還需要在'：first-letter'的樣式中包含'display：block'來工作。無論你使用我的答案還是@dsg，取決於你想影響的範圍是否在另一個範圍內，ID爲'fletter'，或者你想影響的範圍是否有'fletter' – aelfric5578

:first-letter不上直列元素，如span工作。其他內聯元素是：

B，大，我，小，TT 簡稱，縮寫，引用代碼，DFN，EM，大骨節病，強，桑普，VAR 一，BDO，BR，IMG，地圖，對象，q，腳本，跨度，子，坐席按鈕，輸入，標籤，選擇，文本區域

:first-letter作品上塊元素如段落，表標題，表格單元格，列表項目或者應用了inline-block屬性的應用程序。

如果你想有一個:first-letter選擇在span則這樣寫：

p span:first-letter {font-size: 500px !important;} 
span {display:block} 

<p> 
<span>text here</span> 
</p>

來源

2013-12-19 20:00:15

用這個HTML，你可以寫' p：第一個字母{..}'，你根本不需要改變範圍。 –

按照W3C，該first-letter屬性適用於塊元素。

所以，沒有跨度。抱歉。您可能需要創建一個包含第一個字母的內部span，也許使用Javascript或其他東西。或者，如果可能的話，給出範圍display:inline-block。

來源

2013-12-19 20:00:27

'display：inline-block'本來就太好了...... – Claudio

@ user109899 http://jsfiddle.net/wRJ2A/ –

非常準確地說，'：first-letter'是一個僞代碼，元素，它不僅可以應用於「塊元素」，而且還可以應用於塊容器元素。這就是爲什麼'display：inline-block'起作用的原因 - 儘管內聯塊本身像所有其他內聯一樣以內聯方式流入，其內容*參與由其生成的塊格式化上下文。 – BoltClock

：首字母僅適用於塊元素，而跨度默認情況下爲內聯。您可以將span設置爲塊元素（display：block）或者使用div來代替（divs默認爲block）。

來源

2013-12-19 20:02:36

我可能會錯過一些東西，但是你缺少需要2個冒號。這工作完全正常，我在Chrome等：

#<idname>::first-letter{ 
    color: green; 
    font-size: 100px; 
}

來源

2017-12-07 21:37:01

CSS - 第一字母的選擇不與ID工作

回答

相關問題