Question

我正在用html / css进行考试，我有一个问题 - 我们应该建立一个字体网站，我希望有一个索引页面，我希望有一个字体像这样展示

R / r的的Roboto

字体颜色为白色，而分隔符颜色为蓝色，但我希望分隔符变为白色，而文本的其余部分变为蓝色。

现在我有了这个：

＆＃13;

a:hover {
  color: #00ebff;
  transition:
}

＆＃13;

<a href="roboto.html">
  <h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
  <h2>Roboto</h2>
</a>

＆＃13;

我不能为我的生活弄清楚如何去做。

Answer 1

您沿着右侧行，但您需要在分隔符元素的选择器中更具体。以下CSS应该实现您的需求：

a:hover {
    color: #00ebff;
}

a:hover span.spacer {
    color: #fff !important;
}

请注意，此处使用!important规则至关重要，因为您使用的是内联样式。但是，在CSS文件中定义.spacer的样式会更好：

＆＃13;

a .spacer {
  color: #00ebff
}

a:hover {
  color: #00ebff;
}

a:hover .spacer {
  color: #fff;
}

＆＃13;

<a href="roboto.html">
     <h1>R<span class="spacer">/</span>r</h1>
         <h2>Roboto</h2>
 </a>

＆＃13;

Answer 2

.spacer{
  color: #00ebff;
}

a:hover {
  color: #00ebff;
}

a:hover h1 .spacer{
   color: white;
}

Answer 3

＆＃13;

a:hover {
  color: #00ebff !important;
}
a:hover span.spacer {
  color: #fff !important;
}

＆＃13;

<a href="roboto.html">
  <h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
  <h2>Roboto</h2>
</a>

＆＃13;

Answer 4

使用此代码

    .spacer{
      color: #fff;
    }

    a:hover {
      color: #00ebff;
    }

    a:hover .spacer{
       color: white !important;
    }