css 选择器：div 内第一段的第一个字母

Question

<div>
 <p>
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

我如何选择（在我的CSS中）这个div内第一段的第一个字母？？

谢谢

卢卡

Answer 1

div p:first-of-type:first-letter { font-weight: bold; }

Answer 2

在某些情况下，您可能在

<p>

之前有标题或一些其他元素类型，例如：

<div>    
<h1>My Great Title</h1>
<p>
In my younger years I was a great man, but all that changed when I saw...
</p>
<p>
I struck him for shaming my name, my family, my life. It was a shameful...
</p>
</div>

所以在这种情况下，

p:first-child

由于某种原因将不起作用，至少在 Chrome 或 Safari 中不起作用。

所以你会想使用这个：

div p:first-of-type:first-letter{
/* add your awesome code here */
}

感谢您的宝贵时间。

首创

Answer 3

您可以使用 CSS

:first-letter

伪元素将样式应用到块级元素的第一个字母。

Answer 4

嗯，我会至少向您想要应用首字母样式的元素添加一个类。我确信你可以为第一个 div 的第一段做一个 css 规则；但如果你碰巧有另一个 div 开头有一个段落，那么它将应用于所有段落。换句话说，如果不在选择器中使用类/id，它将应用于 EVERY DIV 第一段的第一个字母（这可能不是您正在寻找的行为）。所以我推荐这个：

<div>
 <p class="FirstLetter">
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

然后在你的CSS中：

.FirstLetter:first-letter {
   // styling rules here
}

但是，如果我的直觉不正确，并且您确定这就是您正在寻找的东西，那么@Demian Brecht 的答案应该没问题。

Answer 5

:initial-letter

已在 Chrome/Edge/Safari 上可用，但尚未在 Firefox 上可用。

https://caniuse.com/css-initial-letter

Answer 6

是的，其实很简单：

div p:first-letter

Answer 7

CSS：首字母选择器

div p:first-letter{
 color:blue;   
}

工作示例在这里

注意：以下属性可以与 :first-letter 一起使用

字体属性， 颜色属性， 背景属性， 边际属性， 填充属性， 边框属性， 文字装饰， 垂直对齐（仅当浮动为“无”时）， 文本转换， 行高， 漂浮， 清晰

Answer 8

可以直接定位整个div的第一个字母：

div:first-letter {
    color: red;
}

演示：https://codepen.io/anon/pen/gRoypa