这个纯CSS标签如何工作？

Question

Chris Coyier刚刚遇到过这个问题 - http://css-tricks.com/examples/CSSTabs/

任何人都可以解释一下，当我们点击它时，类.cur如何应用于标签的标题？里面没有js。

Answer 1

它依赖于CSS3选择器：target。目标是针对html页面中的部分，例如http://www.example.com/page#section（SO使用它们跳转到特定答案）。

选择目标后，目标伪类将接管。

这里使用z-index技巧将部分上下推动。

这是它的一般要点，我不知道具体细节。

编辑 -

根本不应用“cur”类。在右侧，每个“窗格”都在其中定义了所有三个选项卡，但每个窗格的“cur”类“硬编码”。 z-indexing将整个窗格（带有选项卡）调到顶部，从而创建效果。实际上，它只是3个HTML的div。

所以这里没有魔法（超出整体：目标伪类）。