1

我有以下一段代码，其中显示了图标和文本

                  <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>

访问此部分后，我想更改文本“Relaxar-te”的颜色。这意味着，一旦我回到这个页面，文本的颜色就会改变。“标题文本”的 CSS 是

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

如果试图插入

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

不幸的是，这不起作用。我看到很多论坛都在使用这种方式，但是，它对我不起作用，或者我遗漏了一些东西。

4

3 回答 3

1

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

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

a.w-inline-block:visited .title-text {
  color: blue;
}
<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>

于 2017-11-07T17:37:52.607 回答
0

您可以通过以下方式定位文本：

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>

于 2017-11-07T17:37:43.137 回答
0

: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>

于 2017-11-07T17:38:56.963 回答