CSS 伪元素应用元素的第一个字符

CSS pseudo-element to apply the first character of an element(CSS 伪元素应用元素的第一个字符)
本文介绍了CSS 伪元素应用元素的第一个字符的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我的 h1 标签中有以下内容:(Hello World)",所以我将以下内容添加到我的 css 以更改此元素的第一个字符:

I have the following content in my h1 tag: "(Hello World)" so I add the following to my css to change the first character of this element:

h1:first-letter { font-size:63px; color:#510007; font-family:Helvetica; }

但是,正如我所注意到的,第一个字母仅用于字母,那么是否有任何解决方法可以将此样式应用于第一个字符?在这种情况下是(".

But, as I noticed, first-letter is only for letters, so is there any workarounds to apply this style to the first char? Which in this case is "(".

推荐答案

来自 规格:

标点符号(即 Unicode 中定义的字符 [UNICODE] 在open"(Ps)、close"(Pe)、initial"(Pi)、final"(Pf)和other"(Po)标点类)中,在第一个字母之前或之后应该是包括

Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included

所以你的括号字母H被:first-letter选中,因为(被认为是标点符号,而不是字母.

So your bracket and the letter H are selected by :first-letter, because ( is considered a punctuation symbol, not a letter.

有两种解决方法:

  1. 将左括号括在 span 标记中:

<!-- To style both (), wrap both in <span> tags -->
<h1><span>(</span>Hello World)</h1>

和目标h1 span:

h1 span {
    font-size: 63px;
    color: #510007;
    font-family: Helvetica;
}

  • 从文本中删除括号:

  • Drop the brackets from your text:

    <h1>Hello World</h1>
    

    并使用 :before 和/或 :after 代替(IE7 和更早版本不支持):

    and use :before and/or :after instead (not supported in IE7 and older):

    /* To style both (), use h1:before, h1:after */
    h1:before {
        font-size: 63px;
        color: #510007;
        font-family: Helvetica;
    }
    
    h1:before { content: '('; }
    h1:after { content: ')'; }
    

  • 这篇关于CSS 伪元素应用元素的第一个字符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

    本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

    相关文档推荐

    :hover:before text-decoration none has no effects?(:hover:before text-decoration none 没有效果?)
    Is CSS faster when you are specific?(当您特定时,CSS 会更快吗?)
    CSS sibling selectors (select all siblings)(CSS 兄弟选择器(选择所有兄弟))
    IE: nth-child() using odd/even isn#39;t working(IE:使用奇数/偶数的 nth-child() 不起作用)
    How can I tell if an element is in a shadow DOM?(如何判断一个元素是否在影子 DOM 中?)
    Can I use CSS to add a bullet point to any element?(我可以使用 CSS 为任何元素添加项目符号吗?)