Capitalize 小写字母全部大写-纯CSS

我在这里看到了这个话题：

但它不是纯CSS。我有一个包含以下文本的div：

<div>
RaWr rAwR
</div>

罗尔罗尔

我想使用css使它看起来像“Rawr-Rawr”。剪切如果我只是将文本转换为大写，它将使其成为“RaWr-RaWr”，已经大写的字母仍保持大写。所以我需要先把它全部小写，然后大写，这个解决方案是把它包装成div吗

我试着用另一个div包起来，但没用：

<style>
    #test3 { text-transform: lowercase; }
    #test3 div { text-transform: capitalize; }
</style>

<div id="test3"><div>RaWr rAwR</div></div>

#test3{文本转换：小写；}
#test3 div{text transform:capitalize；}
罗尔罗尔

当您在不同的div中有单个单词时，应该这样做

#test3 { text-transform: lowercase; }

#test3::first-letter { text-transform: uppercase; }


<div id="test3">haLLo</div>

#test3{文本转换：小写；}
#test3:：第一个字母{文本转换：大写；}
你好

您正在使用嵌套的div

因此

#test3{text transform:lowercase；}

应用于父

div

，因此它同时适用于父和子div

---

将

#test3 div{text transform:capitalize；}

覆盖到子div时，第一个样式

text transform:lowercase

被忽略

不幸的是，在CSS 3之前，没有办法用纯CSS的方式来实现这一点，根据文档，只有5个可能的值可用于

文本转换

，它们都不能解决这一要求

---

但将来可能会有类似于

的自定义文本转换规则，遗憾的是，纯CSS无法做到这一点。现在，您最好的希望是重写文本以避免中间/结尾大写，或者使用JavaScript。（是的，我的眼睛也在转动。）

您建议的方法不起作用，因为一次只有一个

文本转换

属性值应用于元素。当您指定如下内容时

#父{文本转换：小写；}
#父#子{文本转换：大写；}

…子元素上的

文本转换

的值现在是

大写

，没有其他值。这是应用于该元素的唯一转换

有一个草案建议允许作者这样做，但就目前情况而言，我怀疑它是否适用于这种情况。问题是（在一个词中，转换适用）只取一个值。您可以对整个词或词的开头、结尾或中间部分的某些组合定义转换，但如果您可以对每个部分进行不同的转换，这并不明显

这一点似乎在维基提案草案第8期中得到了承认。在该线程中，建议在元素上只允许单个

文本转换

值，并且应在

@text transform

规则中进行组合；但是，规范草案指出：

如果引用的文本转换的作用域与指定的作用域不同 在引用它们的文本转换中，它们应用于 两个示波器

所以像这样的规则是行不通的：

@文本转换为小写，然后大写{
转换：小写，“a-z”到“a-z”单数；
经营范围：初步；
}

我可以看到三个明显的解决方案：

允许在

@text transform

规则中指定多个

范围

值

添加描述符以继承以前的转换，而不重写其作用域值；或

允许选择器具有多个

文本转换
值

---

如果您希望看到此问题的纯CSS解决方案，那么这可能是一个很好的选择。

作为链接问题状态中的注释，纯CSS无法实现这一点。你需要使用Javascript。是的，我试过了，伙计，我想知道是否有新的方法，bisdato给出了有趣的解决方案，下面是第一个字母，虽然

Rawr-Rawr

不是

Rawr-Rawr

。如果divAh中有多个单词，我认为它不会起作用。这很好！至少如果它只有一个词，它就会明白。这件也不用包，我喜欢。以后我会记住这个，但现在它对我没有帮助：（仍然+1这对我的情况有帮助，谢谢！应该是“#test3：：第一个字母{”啊，是的，它不起作用：（我希望在CSS-3之前有一个非嵌套的解决方案？CSS-3能做什么？正如更新的答案中提到的，可能会有允许我们自定义

文本转换
规则的条款。谢谢你这个非常好的答案！我现在知道他们实现它时该做什么了。非常感谢！我现在也知道当前的限制是什么了。）是的。