【问题标题】：How can I replace text using CSS for a specific button with the same class如何使用 CSS 替换具有相同类的特定按钮的文本
【发布时间】：2019-08-22 03:44:19
【问题描述】：

即使 2 个按钮的类相同，是否有 CSS 来替换特定按钮标签？

两个按钮位于不同的页面中。有没有办法使用当前标签（如“下一步”或“完成”）替换标签？

我在下面尝试过。它有效，但它改变了两个按钮的标签。

.uiButton .label {visibility: hidden;}

.uiButton .label:after {content:'Submit';visibility: visible;position: fixed;}

【问题讨论】：

Is there a CSS selector for elements containing certain text?的可能重复
页面上是否有任何唯一的父选择器？如果没有，你可能会不走运。

标签： css text replace

【解决方案1】：

您应该添加一个类来区分按钮。尝试将 CSS 建立在按钮内容的基础上是一种不好的做法。如果将来措辞略有变化怎么办？它会破坏你的 CSS。

编辑：我假设您控制了 html，但如果您不控制，更简单的方法可能是使用 nth-child 或其他选择器来查找您的按钮。比如，也许.buttonsContainer .uiButton:nth-child(2)

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

【讨论】：

我无权更改按钮类。我只能通过 CSS 更改任何内容。我完全明白，如果将来文本发生变化，它会中断。
啊，我明白了。我已经用另一个关于如何找到它们的建议更新了我的答案。

【解决方案2】：

您不能根据内容选择 HTML 元素。

您可以根据元素类型、类/ID、属性或基于父级进行选择。

<element id="thisID class="thisClass" attribute="thisAttribute>
 some conent
</element>

element {
 styles
}

#thisID {
 styles
}

.thisClass {
 styles
}
element[attribute="thisAttribute"] { 
  styles
}

要使用 button，您需要关闭 VALUE 而不是内容。

<button value="somethingUnique">Button Text</button>

button[value="somethingUnique"] { 
  your override styles
}

最好的办法是检查链上的所有父母，直到找到一个唯一的班级或 ID 可供选择。（很多页面都有<body id="contactus"之类的东西）

然后用它来使按钮独一无二。

#contactus .uiButton label {}

【讨论】：