Question

我正在尝试在css上编写脚本，在点击时显示div并同时隐藏另一个div。

CSS：

.box{
    display:none        
}


.box:target{
    display:block;
}

Answer 1

你不能，因为CSS不会监听客户端点击。你得到的最接近的是:active，它在按下鼠标按钮时会记录。

但是，您可以使用复选框黑客执行此操作： http://tympanus.net/codrops/2012/12/17/css-click-events/

1 在复选框中包装元素

2 使用这样的CSS：input[type=checkbox]:checked ~ #IDOfElementWrappedInCheckbox

并且，也在链接上，

：目标方式：

'还有另一种方法，众所周知，用CSS伪造一个click事件，使用：target伪类。这个伪类非常类似于：将鼠标悬停在仅与特定场景匹配的方式中。：target伪类的特殊事件取决于我们称之为“片段标识符”。简单来说，这个伪类指的是有时在URL末尾可以看到的主题标签。因此，当主题标签和元素的ID相同时，它会匹配。

HTML

<a href="#id">Click me!</a>
<p id="id" class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

CSS

.to-be-changed {
    color: black;
}

.to-be-changed:target {
    color: red;
}

基本上，当点击链接（href =“＃id”）时，URL会发生变化，你会转到页面中的#id锚点。在这个时刻，具有此id的元素可以使用：target伪类来定位。'

'和:focus方式（也在链接上）：

THE：FOCUS WAY

让我们继续使用伪类的另一种方式; ：这次关注一个。它几乎是相同的想法，除了它不期望URL更改。它依赖于用户对特定元素的关注。当您在网页上时，可以按Tab键浏览页面上的各种元素。它在填充表格时非常有用，无需使用鼠标即可从一个字段转到另一个字段。它也被盲人或视障人士用于浏览网站。需要注意的重要一点是，某些元素可以集中，如链接，输入等，而其他一些元素则不能像段落，分区和其他许多元素一样。实际上他们可以，但您需要使用数值添加tabindex属性。这个怎么运作 HTML

<span tabindex="0">Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

CSS

span:focus ~ .to-be-changed {
    color: red;
}

因此，当您单击跨度或使用Tab键到达它时，它将变为焦点并匹配：focus伪类。相邻的兄弟选择器完成其余的工作。很简单吧？如果你不想因任何原因搞乱tabindex，你可以简单地使用带有＃href的链接。它也会像魅力一样起作用。'

链接上的最后一件事，

转型黑客

这可能是处理CSS中的click事件最邪恶的方法。说真的，伙计，这很疯狂。这项技术来自Joel Besada，一直是我最喜欢的CSS技巧之一。我们的想法是在CSS过渡中存储CSS样式。是的，你读得对，一个CSS过渡。实际上，这个想法非常简单。它依赖于对变化应用伪无限延迟以防止它恢复到默认值。这可能听起来很复杂，但相当容易，相信我。请看一下代码。这个怎么运作 HTML

<span>Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

CSS

.to-be-changed {
    transition: all 0s 9999999s;
}

span:active ~ .to-be-changed {
    transition: all 0s;
    color: red;
}

第一个声明背后的想法是将任何更改推迟到大约116天，以确保一旦设置更改将保持不变。它不是无限的，而是一种，对吧？但是我们不希望在点击后116天应用更改，我们希望立即设置！因此，我们的想法是在点击期间覆盖延迟（：active pseudo-class）以应用更改。然后，当点击将被释放时，旧的过渡属性将重新启动，将延迟设置为9999999秒，防止更改返回到默认状态。'

Answer 2

我将我的评论转为简短的答案。对于年轻的浏览器，您可以在CSS中进行。

shy , :focus ~ .show {
  display:none;
}
:focus ~ .shy {
  display:block;
}
:focus { /* toggle hide/show) just loosing focus on click */
  pointer-events:none;
}

<p tabindex="0">click to hide/show (toggle) next content</p>
<div class="show"> shown if no click</div>
<div class="shy">shown if clicked</div>

http://codepen.io/gc-nomade/pen/oxybl

如何在css3上设置多个条件

2 个答案:

：目标方式：

THE：FOCUS WAY

转型黑客