时间戳

首页 > 解决方案 > 通过css更改默认文本不起作用

html - 通过css更改默认文本不起作用

问题描述

我有一个默认设置为以下的页面：

<h1 class="header">
   <span class="icon icon-lock"></span>
   "Checkout"
</h1>

在我的 cshtml 页面中，我测试了某个条件，如果满足，我将另一个类添加到名为“checkout2”的元素上，我可以在 chrome 工具中看到这一点。所以html变成：

<h1 class="header checkout2">
       <span class="icon icon-lock"></span>
       "Checkout"
    </h1>

所以现在在我的css中我有以下内容：

.checkout2:after {
   content: 'My new text';
}

内容没有改变任何想法为什么？

标签： htmlcss

解决方案

看起来语义很差，因为您的示例中没有 .checkout2 我将假设您正在使用addClass它来将其添加到错误的元素中。这是它如何工作的一个例子......干杯

.header:after {
  content: attr(data-first);
}

.header:hover:after {
  content: attr(data-second);
}
<h1 class="header" data-first="Hover Me!" data-second="WEEEEEEEEEEE!">
   <span class="icon icon-lock"></span>
</h1>

推荐阅读