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不适用于内嵌元素，例如span。 其他内联元素是：

  

b，大，我，小，tt   abbr，acronym，cite，code，dfn，em，kbd，strong，samp，var   a，bdo，br，img，map，object，q，script，span，sub，sup   按钮，输入，标签，选择，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 here.

Answer 3

如上所述，您的目标是span内部标识为fletter的内容。你要么做

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

或者，如果您知道这将始终是span：

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

Answer 4

根据W3C，first-letter属性适用于块元素。

所以，不是跨度。抱歉。您可能必须创建包含第一个字母的内部跨度，可能使用Javascript或其他内容。或者，如果可能，请给出范围display:inline-block。

Answer 5

我可能会遗漏一些东西，但你缺少需要2个冒号。 这在Chrome等中对我来说非常好用：

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

Answer 6

：第一个字母仅适用于块元素，默认情况下，span是内联的。您可以将范围设置为块元素（显示：块）或使用div（默认情况下div是块）。

Answer 7

Partial

尝试这个。就我而言，一切正常