小写全部然后大写 - 纯CSS

Question

我在这里看到了这个主题:首先将文本小写,然后将其大写.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>

Answer 1

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

#test3 { text-transform: lowercase; }

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


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

Answer 2

可悲的是,你不能用纯CSS做到这一点.现在你最好的希望是重写文本以避免使用medial/final资本或使用JavaScript.(是的,我的眼睛也在滚动.)

您建议的方法不起作用,因为一次只有一个text-transform属性值适用于元素.当你指定类似......

#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }

... text-transform现在是子元素的值capitalize,而不是别的.这是应用于该元素的唯一转换.

有一个提案草案允许作者使用@text-transform规则定义自定义映射表,但就目前而言,我怀疑它是否适用于这种情况.问题在于scope描述符(转换中应用的单词)只需要一个值 - 您可以定义整个单词的变换或单词的开头,结尾或中间部分的某种组合,但是如果你不明显可以为每个部分进行不同的转换.

这似乎在维基草案提案的第8期中得到了承认,并且几年前在www-style上讨论了多个转换.在该线程中,建议text-transform在元素上只允许一个值,并且应该在@text-transform规则中进行组合; 但是,规范草案指出:

如果引用的文本转换具有与引用它们的文本转换中指定的范围不同的范围,则它们适用于两个范围的交集.

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

@text-transform lowercase-then-capitalize {
    transformation: lowercase, "a-z" to "A-Z" single;
    scope: initial;
}

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

1. 允许scope在@text-transform规则中指定多个值;
2. 添加描述符以继承先前的转换而不覆盖其范围值; 要么
3. 允许text-transform选择器的多个值.

如果你想看到这个问题的纯CSS解决方案,那么www风格的邮件列表可能是一个很好的选择.