如何在访问后建立链接没有任何样式规则

Question

我正在使用 React 并执行任务，当选中时;新链接会相应地设置样式。问题是当我点击新链接时，它应该是红色，并且不应该对其应用样式。但是，它会变成深蓝色，并且在我点击页面上的其他位置之前会加下划线。

这里要注意的事情。如果我在点击链接后单击其他位置，它将变为红色而没有下划线。我希望它在第一次点击时发生。

这些是点击链接后的样式：

原因如下：

应该是这样的：

这是我的代码：

式：

.zone-selected {
  text-decoration: none;
  color: red;
}

区域：

  const title = this.props.isSelected
      ? <a href="#" className="zone-selected">
          {this.props.zone.name}
        </a>
      : <a href="#">
          {this.props.zone.name}
        </a>;

你可以忽略所有其他的东西。这基本上是说如果条件为真，则应用样式，如果不是则没有样式。

Answer 1

将以下样式定义添加到CSS：

echo "<option value='1'", $qty == 1? 'selected' : '', ">1</option>";

Answer 2

不确定这是最佳做法还是正确方式＆＃34;但我得到了它的工作，所以我会发布我所拥有的，以防其他人遇到这个。

我需要为.zone-selected添加新样式。我需要覆盖焦点属性。我也希望悬停样式不见了，但出于某种原因，如果我不得不这样做，我将在下面展示。

.zone-selected {
  text-decoration: none;
  color: red;
}

.zone-selected:focus {
  text-decoration: none;
  color: red;
}

有了这个，你会认为我可以这样：

 .zone-selected:hover {
   text-decoration: none;
   color: green;
}

由于某种原因，这不起作用，所以我不得不直接进入标签本身并应用它：

a:hover {
  text-decoration: none;
  color: green;
}