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 */
}

感谢您的时间。

first-of-type

Answer 3

您可以使用CSS :first-letter伪元素将样式应用于块级元素的第一个字母。

Answer 4

好吧，我会在你希望应用第一个字母样式的元素中添加至少一个类。我相信你可以为第一个div的第一段做css规则;但是如果你碰巧在开头有另一个带有段落的div，那么它将适用于所有这些。换句话说，如果不在选择器中使用class / 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

是的，实际上非常简单：

div p:first-letter

Answer 6

CSS：第一个字母的选择器

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

Working example HERE

注意：以下属性可用于：首字母

字体属性，颜色属性，背景属性，保证金属性，填充属性，边境物业，文字修饰， vertical-align（仅当float为'none'时），文本转换，行高，浮动，明确

Answer 7

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

div:first-letter {
    color: red;
}

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

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

7 个答案: