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>

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

1 个答案: