比方說這個標記：顯示第一個字母只
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
我要的是唯一可見的文本的第一個字母（在這種情況下，只是一個T）
（其實我贏了「T最終使用它，但我很好奇這個，肯定可以在以後有幫助）
因此，這是我的一個嘗試：
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
我能夠檢查它不會實現它。問題是爲什麼？有沒有解決這個問題？
CNC中
我們正在尋找IE = + 7/8的版本能夠解決方案..
薩呂
編輯：免責聲明：這不工作根據意見。如果沒有檢查它，請不要使用它符合您的需求。
如果選中了:first-letter僞元素的規範，你會發現以下幾點：
的：第一個字母僞元素必須選擇一個區塊的第一行的第一個字母，如果它的前面沒有任何其他內容（例如圖像或內嵌表格）。
這裏重要的詞是「塊」。
您正在嘗試使用類別爲Twitter的<a/>標記上的僞元素。默認情況下，錨標籤是內聯元素（不是塊級元素）。
了給定的標記，一個問題的解決方案將是風格錨這樣：
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
我不知道你要什麼了，但是這是不夠好用於實驗目的。看看這裏的演示：http://jsfiddle.net/H7jhF/。
嘿感謝您的寫作，這不適合我在最新版本的FF ... – 2012-07-17 01:33:17
嗯，這很奇怪。 「可見性：隱藏」規範說：「如果元素的後代具有」可見性：可見性「，則元素的後代將可見（http://www.w3.org/TR/CSS2/visufx.html#visibility）。我會環顧一下，看看我是否能找出問題所在。請記住，這仍然是一個愚蠢的解決方案，因爲'visibility'屬性不會消除元素的框。 – 2012-07-17 02:17:15
這適用於Chrome，但由於某些原因，不適用IE9。微軟表示支持，但似乎並非如此。 http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx – 2014-02-12 22:49:30
你在做什麼是喜歡躲在一個父元素，並試圖展示它的一個孩子，它不會工作，因爲父母的風格覆蓋它。父元素也必須是塊級元素才能工作。就像div或p標記，或標記上的display: block;一樣。
這是一個使用顏色的東西：
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
我剛剛發佈了一些內容。這是一個小小的演示：http://jsfiddle.net/H7jhF/。另外，對於OP，當你認爲應該起作用的東西不是時（請查看http://www.w3.org/TR/CSS2/selector.html#first-letter） – 2012-07-16 21:52:31
@tjeezy啊是的，我在看能見度，但它沒有工作，但我還沒有想出顯示模塊。你應該將它作爲答案發布，因爲它比我的要好。 – sachleen 2012-07-16 21:56:00
雖然你的回答很好。哦，我也提交了一個。 – 2012-07-16 22:33:36
爲什麼不直接使用JavaScript和字符串分割成一個數組，數組中使用的第一個項目。或charAt（）
好的，我想知道如果CSS沒有寬度和東西是可能的.. – 2012-07-17 01:24:15
嘗試這樣：
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}<div class="Twitter">Twitter</div>也許這是不是最好的解決方案，但它的工作原理。
我使用了@ tjeezy的jsfiddle（http://jsfiddle.net/H7jhF/89/），並根據您的建議使用字體大小進行編輯，並將其設置爲內嵌塊，以便其他元素可以在其後流動。總之我更喜歡使用字體大小。 – Robert 2015-04-29 16:02:16
純CSS答案使用可見性和顏色技巧來隱藏剩餘的字母，但它們仍然存在並影響佈局。這可能會導致佈局問題，例如如果你想浮動元素並在它旁邊放置一些東西。
我發現了一個有趣的方式來做到這一點，沒有隱藏的元素。訣竅是把整個單詞縮小到幾乎沒有，然後炸掉第一個字母。這有點像OP試圖做的，但它的工作原理是因爲它在連續的頻譜上運行，而不是僅僅關閉內部的任何東西而不是display: none。 （的類似物>數字情況類。）
HTML：
<div>Ding Dong</div> and other stuff
CSS：
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
結果：
拍客頁面中的內容，並使用動態內容顯示的字母：在這個小提琴
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
另一種方法是使用color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>但是，這不會爲LTE IE8工作。
參考文獻：
這是我做的：
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
順便說一句，這是僞O元素僞類或？ – 2012-07-16 21:43:02
你在做什麼就像隱藏一個父元素，並試圖顯示它的一個孩子，它不會工作，因爲父母的樣式覆蓋它。父元素也必須是塊級元素才能工作。像'a'標籤上的'div'或'p'標籤或'display：block'一樣。 – sachleen 2012-07-16 21:44:48
@sachleen顏色，也許？（透明VS自定義） – 2012-07-16 21:45:42