[英]CSS - First-letter selection not working with ID
My CSS :first-letter selector works with all p
elements, but with a span
that has an id #fletter
it won't work... 我的CSS:首字母选择器适用于所有
p
元素,但是带有id #fletter
的span
它将无效...
#fletter span:first-letter {
font-weight: 600;
font-size: 25px;
}
<span id="fletter">
The selector works fine with my p
elements, though. 但是,选择器与我的
p
元素一起工作正常。
p:first-letter {
font-weight: 600;
font-size: 25px;
}
<p>Lorem Ipsum</p>
:first-letter
does not work on inline elements such as a span
. :first-letter
不适用于内联元素,如span
。 others inline elements are: 其他内联元素是:
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, input, label, select, textarea
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
works on block elements such as a paragraph, table caption, table cell, list item, or those with the inline-block
property applied. :first-letter
适用于块元素,如段落,表格标题,表格单元格,列表项目或应用了inline-block
属性的块元素。
if you want a :first-letter
selector in a span
then write it like this: 如果你想要一个
:first-letter
的选择span
,然后把它写这样的:
p span:first-letter {font-size: 500px !important;}
span {display:block}
<p>
<span>text here</span>
</p>
That is because :first-letter
can only be used on block level elements. 这是因为
:first-letter
只能用于块级元素。
One solution could be to display the span as a block level element: 一种解决方案是将跨度显示为块级元素:
#fletter span {
display:block;
}
#fletter span:first-letter {
font-weight: 600;
font-size: 25px;
}
As written, you're targeting a span
inside of something with the id fletter
. 由于写的,你要指定一个
span
的东西用id内fletter
。 You either need to do 你要么做
#fletter:first-letter {
font-weight: 600;
font-size: 25px;
display: block;
}
or, if you know this will always be a span
: 或者,如果你知道这将永远是一个
span
:
span#fletter:first-letter {
font-weight: 600;
font-size: 25px;
display: block;
}
According to the W3C , the first-letter
property applies to block elements. 根据W3C ,第
first-letter
属性适用于块元素。
So, not spans. 所以,不是跨度。 Sorry.
抱歉。 You may have to create an inner span containing the first letter, maybe with Javascript or something.
您可能必须创建包含第一个字母的内部跨度,可能使用Javascript或其他内容。 Or, if it's possible, give the span
display:inline-block
. 或者,如果可能,请给出span
display:inline-block
。
I might be missing something but you are lacking the requires 2 colons. 我可能会遗漏一些东西,但你缺少需要2个冒号。 This works perfectly fine for me in Chrome etc:
这在Chrome等中对我来说非常好用:
#<idname>::first-letter{
color: green;
font-size: 100px;
}
:first-letter only works on block elements, and span is, by default, inline. :first-letter仅适用于块元素,默认情况下,span是内联的。 You can either set the span to be a block element (display:block) or use a div instead (divs are block by default).
您可以将范围设置为块元素(显示:块)或使用div(默认情况下div是块)。
#fletter:first-letter {
font-size: 100px;
color: #8A2BE2;
}
Try this one. 试试这个吧。 In my case it is working fine
在我的情况下它工作正常
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.