問題描述
我的 h1 標簽中有以下內容:(Hello World)"，所以我將以下內容添加到我的 css 以更改此元素的第一個字符:
I have the following content in my h1 tag: "(Hello World)" so I add the following to my css to change the first character of this element:
h1:first-letter { font-size:63px; color:#510007; font-family:Helvetica; }
但是，正如我所注意到的，第一個字母僅用于字母，那么是否有任何解決方法可以將此樣式應用于第一個字符?在這種情況下是(".
But, as I noticed, first-letter is only for letters, so is there any workarounds to apply this style to the first char? Which in this case is "(".
推薦答案
來自 規格:
標點符號(即 Unicode 中定義的字符 [UNICODE] 在open"(Ps)、close"(Pe)、initial"(Pi)、final"(Pf)和other"(Po)標點類)中，在第一個字母之前或之后應該是包括
Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included
所以你的括號和字母H被:first-letter選中，因為(被認為是標點符號，而不是字母.
So your bracket and the letter H are selected by :first-letter, because ( is considered a punctuation symbol, not a letter.
有兩種解決方法:
將左括號括在
span標記中:
<!-- To style both (), wrap both in <span> tags -->
<h1><span>(</span>Hello World)</h1>
和目標h1 span:
h1 span {
font-size: 63px;
color: #510007;
font-family: Helvetica;
}
從文本中刪除括號:
Drop the brackets from your text:
<h1>Hello World</h1>
并使用 :before 和/或 :after 代替(IE7 和更早版本不支持):
and use :before and/or :after instead (not supported in IE7 and older):
/* To style both (), use h1:before, h1:after */
h1:before {
font-size: 63px;
color: #510007;
font-family: Helvetica;
}
h1:before { content: '('; }
h1:after { content: ')'; }
這篇關于CSS 偽元素應用元素的第一個字符的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！