隐藏标题类css中的初始字符答案

【问题标题】：hide inital character in a titile class css隐藏标题类css中的初始字符
【发布时间】：2020-12-01 16:22:54
【问题描述】：

所以我有一个网站，不久前我就开始管理了，所以我仍然对以前的人如何设计网站的某些部分有所了解，不幸的是，我主要还是坚持使用以前构建的系统。

所以我想知道是否有办法可以隐藏特定字符，所以假设我有一个标题

z FULL COURSE Platinum BUNDLE FOR CARE STAFF

如果我想摆脱我可以使用的 z

p::first-letter {
    font-size: 0px !important;
}

不幸的是，这意味着我隐藏了所有第一个字符

【问题讨论】：

标签： html css wordpress

【解决方案1】：

不要选择所有的p标签，只选择你感兴趣的标签。

一种方法是在相关标签中添加class，例如

<p class="title">z FULL COURSE platinum BUNDLE FOR CARE STAFF</p>

并更改您的 CSS 以仅选择那些 p 标记：

p.title::first-letter {
    font-size: 0px !important;
}

【讨论】：

不幸的是，标题是通过程序生成的，所以我可以在单个标题中放置一个标识符
CSS 不支持“字符选择”。所以单独使用 CSS 是不可能的 - JavaScript 可以工作。

【解决方案2】：

编辑：查看了您的代码和 AFAIK，仅使用 css 无法按内容进行选择。你可以：

为此使用 JS（使用正则表达式）
选择每个h1唯一的东西并删除z（例如h1[onclick="showModal(2785)"]
（生病了，出于安全考虑，不推荐）将标签的内容复制到某个属性（例如data-content=""）然后，您可以使用h1[data-content^="z "]选择元素

https://www.w3schools.com/css/css_attribute_selectors.asp

您需要指定要在哪个p 中隐藏第一个字母。如果你有固定数量的段落并且你知道它的父级，你可以使用一些标识符 class/id 或使用:nth-child

p#hide-z::first-letter, .container > p:nth-child(3)::first-letter{
    font-size: 0px !important;
}

<div class="container">
<p id="hide-z">z FULL COURSE platinum BUNDLE FOR CARE STAFF</p>
<p>Lorem Ipsum dolor...</p>
<p>z FULL COURSE platinum BUNDLE FOR CARE STAFF</p>
</div>

【讨论】：

问题是产品详细信息是在系统上自动生成的，所以我不能在不将标识符添加到每个产品的情况下添加标识符，我希望有一种方法可以定位第一个字母，如果它是 z你可以在这里看到产品yourhippo.com/course-search/…
@user3565700 更新了答案，希望对您有所帮助