作者 | 乔科科
链接|
本系列首先讨论一些有趣的 CSS 主题。 不管实用性如何，有些主题旨在拓宽解决问题的思路。 此外，它们还涉及一些容易被忽视的 CSS 细节。
解决问题时不考虑兼容性。 这些问题既疯狂又富有想象力。 想到什么就说什么。 如果在解题过程中有你觉得不熟悉的CSS属性，请尽快去接受辅导。
不断更新，不断更新，不断更新，重要的事情说三遍。
所有主题都汇总在我的 Github () 中。
不使用Javascript，使用纯CSS方案实现类似右图的导航栏切换：
CSS的力量有时超乎我们的想象。 一般来说，选项卡切换确实需要一定的脚本来实现。 让我们看看如何使用 CSS 来完成同样的事情。
实现Tab切换的难点在于如何利用CSS接收用户的点击事件并操作相关节点。 那是：
如何接收点击风暴
如何操作相对 DOM
让我们看看如何使用两种不同的方法来实现需求：
方法1：:target伪类选择器
首先，我们需要解决的问题是如何接收点击风暴。 这里第一个方法是：目标伪类接收。
:target 是 CSS3 中的一个新伪类，可用于选择当前活动的目标元素。 当然，通过URL末尾的锚点名称#css3单选框，它可以指向文档中的特定元素。 链接的元素是目标元素。 它需要一个 id 来匹配文档中的目标。
解释很难理解。 我们来看看实际的使用情况。 假设我们的HTML代码如下：
列表1内容：123456
列表2内容：abcdefgkijkl
由于要使用:target，因此需要一个HTML锚点以及该锚点对应的HTML片段。 所以之前的结构需要是：
清单1
清单2
列表1内容：123456
列表2内容：abcdefgkijkl
这样，上面
href="#content2">列表 2
仔细比较一下与之前结构的优缺点。 这里我只是将ul从两个内容的顶部移动到了底部。 我为什么要这样做？
因为这里需要使用同级选择器~。
E~F{ cssRules }，CSS3同级选择器（E~F），选择E元素之前的所有同级元素F。
注意这里最重要的一句话是E~F只能选择E元素后面的F元素，所以顺序就变得非常重要。
这样改变位置后，就可以通过同级选择器~来操作整个.nav样式了。
#content1：目标〜.nav李{
// 改变li元素的背景颜色和字体颜色
＆：第一个孩子{
背景：#ff7300；
颜色：#fff；
#content2：目标〜.nav李{
// 改变li元素的背景颜色和字体颜色
＆：最后一个孩子{
背景：#ff7300；
颜色：#fff；
在上面的 CSS 规则中，我们使用 ~ 选择器来控制触发 #content1:target 和 #content2:target 时两个导航 li 元素的样式。
至此，1、如何接收点击风暴和2、如何操作相关DOM这两个问题已经解决了css3单选框，剩下的就是一些小修复工作了。
Demo戳我：纯CSS导航切换(:target伪类实现)()
方法二：&&
通过使用
类=“内容”>
class="content1"> 列表 1 内容：123456
class="content1"> 列表 2 内容：abcdefgkijkl
