目标css中每个单词的第一个字母

Question

我需要更改每个单词的每个第一个字母的大小、颜色和粗细。我不是在谈论将每个第一个字母大写。我的意思是针对第一个字母并根据我的选择应用样式。 :

Answer 1

您应该用标签包裹每个单词并使用

::first-letter

CSS 选择器。

另请注意，此选择器不适用于内联元素。如果您想将其与内联元素（例如

<span>

）一起使用，请确保设置

display:inline-block

（有关更多详细信息，请参阅此处：https://stackoverflow.com/a/7631782/11298742）

示例：

p span { display: inline-block; font-family: 'Roboto', sans-serif }
p span::first-letter {
    color: red;
    font-weight: bold;
}

<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span></p>

Answer 2

要动态地将样式应用到元素内每个单词的第一个字母，您可以利用 JavaScript 和 CSS。

您可以使用 JavaScript 实现用

<span>

元素包裹每个单词的第一个字母的效果。这种方法允许您自动将样式应用到特定元素，而无需直接在 HTML 中对其进行硬编码。如果您正在处理某种动态数据，这可能会很有用。例如：

window.onload = function () {
    // Select elements with the class "each-word"
    var elements = document.querySelectorAll(".each-word");

    for (var i = 0; i < elements.length; i++) {
        var htmlContent = elements[i].innerHTML;
        var modifiedContent = htmlContent.replace(
            /(?:<[^>]*>)|(\b[a-z])([a-z]+)?\b/gim,
            function (match, p1, p2) {
                if (p1) {
                    return "<span class='first-letter'>" + p1 + "</span>" + (p2 || "");
                } else {
                    return match; // Preserve HTML tags
                }
            }
        );
        elements[i].innerHTML = modifiedContent;
    }
};

.first-letter {
  color: red;
  font-size: 50px;
  /* Customize other styles as needed, KYSO */
}

<h2 class="each-word">Lorem ipsum dolor</h2>
<h3 class="each-word">Lorem ipsum dolor sit <br>amet consectetur</h3>

正则表达式

/(?:<[^>]*>)|(\b[a-z])([a-z]+)?\b/gim

用于文本替换。它有选择地匹配和替换文本内容，同时使用

(?:<[^>]*>)

非捕获组保留 HTML 标签。就像上面示例中保留在

<br>

内部的

<h3>

一样。

如果需要定位嵌套子元素的每个单词的第一个字母，可以使用

querySelectorAll

函数中的子选择器方法来实现。例如：

window.onload = function () {
    // To target specific child elements within "each-word"
    var elements = document.querySelectorAll(".each-word > div > h3");

    for (var i = 0; i < elements.length; i++) {
        var htmlContent = elements[i].innerHTML;
        var modifiedContent = htmlContent.replace(
            /(?:<[^>]*>)|(\b[a-z])([a-z]+)?\b/gim,
            function (match, p1, p2) {
                if (p1) {
                    return "<span class='first-letter'>" + p1 + "</span>" + (p2 || "");
                } else {
                    return match; // Preserve HTML tags
                }
            }
        );
        elements[i].innerHTML = modifiedContent;
    }
};

.first-letter {
  color: red;
  font-size: 50px;
  /* Customize other styles as needed, KYSO */
}

<div class="elementor-element each-word">
    <div class="elementor-widget-container">
        <h3>Lorem consectetur adipisicing elit. <br>Eligendi dolorem ecessitatibus.</h3>
    </div>
</div>

querySelectorAll

函数可用于根据子元素在结构中的嵌套来选择特定的子元素，例如

var elements = document.querySelectorAll(".each-word > div > h3");