Question

我有以下代码，其中显示图标和文字

                  <div class="group-block last">
                    <a class="w-inline-block" href="news.html" data-load="1">
                      <div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
                      <div class="group-title">
                        <div class="title-text">Relaxar-te</div>
                      </div>
                    </a>
                  </div>

我想改变文字的颜色＆＃34; Relaxar-te＆＃34;访问此部分后。这意味着，一旦我返回此页面，文本的颜色就会改变。＆＃34;标题文本＆＃34;的CSS是

 .title-text {
   line-height: 68px;
  }

如果试图插入

 .title-text:visited {
    color: blue;
 }

不幸的是，这不起作用。我看到他们使用这种方式的许多论坛，然而，它对我不起作用或者我错过了一些东西。

Answer 1

:visited仅适用于链接。所以你需要的是

＆＃13;

.title-text {
  line-height: 68px;
}

a.w-inline-block:visited .title-text {
  color: blue;
}

＆＃13;

<div class="group-block last">
  <a class="w-inline-block" href="news.html" data-load="1">
    <div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
    <div class="group-title">
      <div class="title-text">Relaxar-te</div>
    </div>
  </a>
</div>

＆＃13;

Answer 2

您可以这种方式定位文本：

a:visited .title-text{
  color: pink;
}

<div class="group-block last">
  <a class="w-inline-block" href="news.html" data-load="1">
    <div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
    <div class="group-title">
      <div class="title-text">Relaxar-te</div>
    </div>
  </a>
</div>

Answer 3

:visisted仅适用于a代码。 .title-text指向div

您可以像这样更改代码来修复它：

.custom-link:visited {
 color:blue;
}

<div class="group-block last">
                    <a class="w-inline-block custom-link" href="news.html" data-load="1">
                      <div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
                      <div class="group-title">
                        <div class="title-text">Relaxar-te</div>
                      </div>
                    </a>
                  </div>

HTML-访问后更改颜色文本

3 个答案: