:nth-letter 伪元素不起作用 [英] :nth-letter pseudo-element is not working

问题描述

当我为我的面包店建立一个网站时，我想制作一个花哨的标题来触发每个字母的颜色.所以我可以利用跨度，但这很累人.我想分别使用 :first-letter 或 :first-char 但没有任何效果.你们中有人知道怎么做吗?

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;
}

推荐答案

没有 :nth-letter 伪元素(也没有 :first-char)CSS.:first-letter 伪元素(问题在标题和散文中提到但未在代码中使用)有效，但要为其他字母着色，您必须 将它们中的每一个包裹在一个自己的元素中，通常是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屋！