：nth-​​letter - 为什么它不工作？ [英] :nth-letter - why is it not working?

问题描述

因为我为我的面包店建立一个网站，我想制作一个花哨的标题触发每个字母的颜色。所以我可以利用span，但这是耗尽。我想使用：第一个字母或分别：第一个字符，但没有作用。

as I build a site for my bakery I would like to make a fancy headline triggering the color for each letter. So I could make use of span but this is exhausting. I wanted to use :first-letter or respectively :first-char but nothing works. Does anyone of you have an idea how to do it?

感谢和Saludos！

Thanks and Saludos!

   h4{

    font-size:100px;
    margin-bottom:20px;
    margin-top:0;
    padding:0px;
    font-family: 'Tangerine', cursive;
    font-weight:normal;
}


    h4:nth-letter(2) {
        color:#06C !important;
    }
    h4:nth-letter(3) {
        color:#C9C !important;
    }

推荐答案

在CSS中的$ c>：nth-​​letter 伪元素（和没有：first-char ）。 ：第一个字母伪元素（在标题和散文中提及但在代码中未使用的问题）可行，但是要对其他字母进行着色 必须将每个元素包含在自己的元素中，通常为 span 。

There is no :nth-letter pseudo-element (and no :first-char) in CSS. The :first-letter pseudo-element (which the question mentions in the title and in the prose but does not use in the code) works, but to color other letters, you must wrap each of them in an element of its own, normally span.

这篇关于：nth-​​letter - 为什么它不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！