CSS 仅在一个元素上更改内容答案

【问题标题】：CSS change content only on one elementCSS 仅在一个元素上更改内容
【发布时间】：2020-10-11 11:14:29
【问题描述】：

我有以下 html sn-p:

<div class="account_button account_button2">Login</div>

现在我只想使用 CSS 更改该内容（“登录”）。（因为我不允许更改 HTML 文件，我只能写一个 CSS Overwrite 文件）

所以我用这个 css 代码更改了内容：

.account_button {
    visibility: hidden;
} 

.account_button:after {
    content: 'Login / Register';
    visibility: visible;
}

这绝对有效。但现在是棘手的部分。

如果用户已经登录到以下内容（span 元素添加到 html），则通过 Javascript 更改提到的 html 截图：

<div class="account_button account_button2"><span>Username</span></div>

我的 CSS 覆盖也会覆盖该值。我怎样才能避免这种情况？我只想更改 DIV 元素的值，而不是在某些情况下通过 Javascript 添加的 SPAN 元素。

感谢您的任何想法！

编辑：稍微澄清一下：我有两个“html 状态”：

1.)

<div class="account_button account_button2">Login</div>

这是通过上面的 css 更改为显示“登录/注册”。

2.)

<div class="account_button account_button2"><span>Username</span></div>

如果JS把html改成这个，上面的CSS也会显示“登录/注册”。如果存在跨度标签，我希望它显示值。如果它们不存在，我想显示“登录/注册”。

【问题讨论】：

不幸的是，CSS 中没有父选择器。看来你需要 JavaScript
在 CSS 级别，您需要知道用户是否已登录。没有办法解决这个问题。必须修改登录 JS 以切换指示用户登录状态的某些 CSS 类（如果尚未定义某些类）。另外，我怀疑您当前的解决方案效果绝对好，因为隐藏的文本可能不可见，它仍然占用“登录”文本长度的空间。
感谢您的信息。所以有没有办法只通过 CSS 做到这一点？它可以工作，因此无论是否添加了标签或值只是在
标签内，它总是显示“登录/注册”......我需要的是一种告诉 css“只更改 div 的内容，但如果在 div 中添加 span 则不会".. :-/
你可以对span使用绝对定位，这样当span被添加时，它会覆盖其他设置的文本？

标签： html css text replace css-selectors

【解决方案1】：

你可以对span使用绝对定位，这样当span被添加时，它会覆盖其他设置的文本？

我设置了以下示例，这可能会有所帮助： jsfiddle

.account_button {
  background: red;
  line-height: 30px;
  color: #fff;
  display: inline-block;
  position: relative;
}

.account_button span {
  background: red;
  width: 100%;
  height: 100%;
  color: #fff;
  left: 0;
  top: 0;
  position: absolute;
  text-align: center;
 }

这可以解决您的问题吗？

更新：设置按钮宽度：

<div class="account_button account_button2">Login <span>Username</span> </div>
<div class="account_button account_button2">Login </div>

.account_button {
  background: red;
  line-height: 30px;
  color: #fff;
  display: inline-block;
  position: relative;
  padding: 0 10px;
  width: 200px;
  text-align: center;
}

.account_button::before {
  content: 'Login/Register';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: blue;
}

.account_button span {
  background: red;
  width: 100%;
  height: 100%;
  color: #fff;
  left: 0;
  top: 0;
  position: absolute;
  text-align: center;

 }

jsfiddle example

这解决了吗？更新 3：添加高度和行高：

<div class="account_button account_button2"><span>Username</span> </div>
<br>
<div class="account_button account_button2">Login </div>
.account_button {
  background: red;
  line-height: 30px;
  color: #fff;
  display: inline-block;
  position: relative;
  padding: 0 10px;
  width: 200px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.account_button::before {
  content: 'Login/Register';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: blue;
  line-height: 30px;
}

.account_button span {
  background: red;
  width: 100%;
  height: 100%;
  color: #fff;
  left: 0;
  top: 0;
  position: absolute;
  text-align: center;

 }

jsfiddle 示例

像这样？

【讨论】：

如果添加了 span，则应该显示 span 值。所以没有设置跨度：用“登录/注册”覆盖默认的html“登录”。跨度已设置（因此用户已登录） CSS 不应覆盖默认的 html“登录/注册”，而是应显示跨度值（通过 JS 填充用户名）是否可以以某种方式告诉 CSS 仅更改 div但如果 span 在该 div 元素内，请不要触摸？
如果您可以/想要为按钮设置固定宽度，您可以执行以下操作：jsfiddle.net/hL3rmnt1
感谢您的帮助！但我不会有这种情况：“
Login Username
”相反，我会有这个：“
用户名
”（我编辑了我的第一篇文章以使其更清晰）
为按钮添加高度和行高：jsfiddle.net/hL3rmnt1/1
非常感谢！现在我明白了你想告诉我的！ ;-) 也许它不是“最干净”的解决方案——但我让它工作了！谢谢你。我会进行一些测试，让您知道这是否适合我