纯CSS切换显示与原生CSS冲突

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 属性。

我还尝试使用以下问题中的标签来重现相同的行为：https://stackoverflow.com/questions/22318248/on-click-hide-this-button-link-pure-css

但我还没能做到。任何想法将不胜感激。

P.S.：

<style scoped>

不能用于定位此 HTML 块。

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

Answer 1

您尝试过使用！重要吗？

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

.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 ;
}