:nth个字母的伪元素不起作用 [英] :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?

感谢和问候！

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中没有:nth-letter伪元素(也没有:first-char). :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个字母的伪元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！