CSS - 不使用ID的第一个字母选择

Question

我的CSS:第一个字母选择器适用于所有p元素,但是如果span它具有id #fletter,它将无效...

---

#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>

Answer 1

:first-letter不适用于内联元素,如a span.其他内联元素是:

b,big,i,small,tt abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var a,bdo,br,img,map,object,q,script,span,sub,sup button ,输入,标签,选择,textarea

:first-letter适用于块元素,例如段落,表格标题,表格单元格,列表项目或inline-block应用了属性的块元素.

如果你想在一个:first-letter选择器span然后写这样:

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

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

Answer 2

那是因为:first-letter只能在块级元素上使用.

一种解决方案是将跨度显示为块级元素:

#fletter span {
   display:block;
}

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

jsFiddle在这里.