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

bvpmtnay  于 12个月前  发布在  其他
关注(0)|答案(8)|浏览(180)
<div>
 <p>
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

字符串

我如何选择(在我的css中)这个div中第一段的第一个字母?

谢谢
卢卡

klh5stk1

klh5stk11#

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

字符串

fcwjkofz

fcwjkofz2#

在某些情况下,<p>之前可能有一个header或其他元素类型。

<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

gc0ot86w

gc0ot86w3#

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

z0qdvdin

z0qdvdin4#

好吧,我会给你想要应用首字母样式的元素添加至少一个类,我相信你可以为第一个div的第一段做一个css规则;但是如果你碰巧有另一个div的开头是一个段落,那么它将被应用到所有的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布雷希特的答案应该做得很好。

63lcw9qa

63lcw9qa5#

:initial-letter

字符串
已在Chrome/Edge/Safari上可用,但尚未在Firefox上可用。
https://caniuse.com/css-initial-letter

2guxujil

2guxujil6#

是的,其实很简单:

div p:first-letter

字符串

izj3ouym

izj3ouym7#

CSS:首字母缩略图

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

字符串
Working example HERE

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

字体属性、颜色属性、背景属性、边距属性、填充属性、边框属性、文本装饰、垂直对齐(仅当float为“无”时)、文本转换、行高、float、清除

oo7oh9g9

oo7oh9g98#

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

div:first-letter {
    color: red;
}

字符串
演示:https://codepen.io/anon/pen/gRoypa

相关问题