我在这里看到这个话题： First lowercase the text then capitalize it. Is it possible with 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>
解决方法
您建议的方法不起作用,因为一次只能对元素应用一个文本转换属性值.当你指定像…
#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }
… child元素上的text-transform的值现在大写,没有别的.这是应用于该元素的唯一转换.
有一份草案提案允许作者到define custom mapping tables with an @text-transform rule,但是我认为这将有助于这种情况.问题在于scope descriptor(转化适用于这个词)只需要一个价值 – 你可以定义一个单词的转换,或一个单词的开始,结尾或中间部分的某种组合,但是如果你可能对每个部分都有不同的转换.
这在Wiki草案提案和multiple transforms were discussed a couple of years back on www-style的问题8中似乎得到了承认.在该线程中,建议在元素上只允许使用单个文本变换值,并且该组合应该在@ text-transform中完成规则;但是,草案规定：
If the text-transforms referred to have a different scope than the scope specified
in the text-transform that refers to them,they apply at the intersection of the
two scopes.
所以这样的规则是不行的：
@text-transform lowercase-then-capitalize {
transformation: lowercase,"a-z" to "A-Z" single;
scope: initial;
}
我可以看到三个明显的解决方案：
>允许在@ text-transform规则中指定多个范围值;
>添加一个描述符来继承先前的转换,而不会覆盖其范围值;要么
>允许选择器的多个文本变换值.
The www-style mailing list可能是一个好的地方,如果你想要看到一个纯CSS的解决方案,这个问题.
