Question

情况如下：

我想用纯CSS切换两个HTML项目的显示。

特别是，使用纯CSS切换显示两种不同的语言内容。

在处理了CSS的奇怪事情之后，我终于得到了这个（下面的工作小提琴）：

HTML

<span class="spanEN" tabindex="0">EN</span>
<span class="spanES" tabindex="0">ES</span>
<div class="EN" >Some ENGLISH content</div>
<div class="ES" >Some SPANISH content</div>

CSS

.spanEN:focus ~ .ES {
  display: none;
}
.spanEN:focus ~ .EN {
  display: block;
}
.spanES:focus ~ .EN {
  display: none;
}
.spanES:focus ~ .ES {
  display: block;
}
.ES {
  display: none;
}

在这里工作小提琴：http://jsfiddle.net/6W7XD/5348/

问题是，在将其迁移到我的网站（托管在Wordpress.com中）后，它已不再有效。

这是因为在保存内容时删除了tabindex属性。

我还试图通过使用此问题中的标记来重现相同的行为：on click hide this (button link) pure css

但我无法做到。任何想法都将不胜感激。

P.S。：<style scoped>不能用于定位此HTML块。

编辑：我发现感谢您在保存时从HTML中删除了tabindex =“0”的评论。关于如何解决这个问题的任何想法？或者不需要使用tabindex属性的任何解决方法？相应地编辑问题。

Answer 1

您尝试使用!important了吗？

如果你没有，你可以试试这个

.spanEN:focus ~ .ES {
  display: none !important;
}
.spanEN:focus ~ .EN {
  display: block !important;
}
.spanES:focus ~ .EN {
  display: none !important;
}
.spanES:focus ~ .ES {
  display: block !important;
}
.ES {
  display: none ;
}

纯CSS切换显示与本机CSS

1 个答案: