css - 如何在css3上设置多个条件

Question

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

CSS:

.box{
    display:none        
}


.box:target{
    display:block;
}

Answer 1

你不能，因为 CSS 不监听客户端点击。最接近的是 :active，它会在按住鼠标按钮时注册。

但是，您可以使用Checkbox Hack 来做到这一点:http://tympanus.net/codrops/2012/12/17/css-click-events/

1 将元素包裹在复选框中

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

还有链接，

:target 方式:

'还有另一种众所周知的方法，可以使用 :target 伪类使用 CSS“伪造”点击事件。这个伪类与 :hover 非常相似，因为它只匹配特定场景。: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 会发生变化，您会转到页面中的 anchor #id。此时此刻，可以使用 :target 伪类将具有此 id 的元素作为目标。'

'和 :focus 方式(也在链接上):

:专注的方式

让我们继续使用伪类的另一种方式； :focus 一个这次。这几乎是相同的想法，除了它不期望 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 中处理点击事件的最邪恶的方式。说真的，伙计们，这太疯狂了。这项技术来自 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 天应用更改，我们希望立即设置!所以想法是覆盖点击期间的延迟(:事件伪类)以应用更改。然后当点击被释放时，旧的过渡属性将重新启动，将延迟设置回 9999999s，防止更改返回到默认状态。'