css - CSS 中有没有一种方法可以将特定的文本字母大写？

Question

对于页面上的给定文本节点...

abcdefghijklmnop

你可以用这个将所有字母大写:

selector {
    text-transform : uppercase;
}


/* Output: ABCDEFGHIJKLMNOP */

您可以只将第一个字母大写:

selector {
    display : block;
}

selector:first-letter {
    text-transform: capitalize;
}

/* Output: Abcdefgijklmnop */

除了第一个字母之外，还有什么办法可以将字符串中的特定字母大写吗？示例:

/* Pseudo code */
selector:nth-character(odd) {
    text-transform : uppercase;
}

/* Output: aBcDeFgHiJkLmNoP */

Answer 1

目前纯 CSS 是不可能的。但是你可以使用 letteringjs.com插件来实现它。您可以阅读 Lettering.js Docs

$(document).ready(function() {
  $(".custom-caps").lettering();
});

.custom-caps > span:nth-child(even) {
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.js"></script>
<div class="custom-caps">abcdefghijklmnop</div>

HTML:

<div class="custom-caps">abcdefghijklmnop</div>

呈现的 HTML:

<div class="custom-caps">
  <span class="char1">a</span>
  <span class="char2">b</span>
  <span class="char3">c</span>
  <span class="char4">d</span>
  <span class="char5">e</span>
  <span class="char6">f</span>
  <span class="char7">g</span>
  <span class="char8">h</span>
  <span class="char9">i</span>
  <span class="char10">j</span>
  <span class="char11">k</span>
  <span class="char12">l</span>
  <span class="char13">m</span>
  <span class="char14">n</span>
  <span class="char15">o</span>
  <span class="char16">p</span>
</div>