我在<img>元素中有一个<div>元素。每当点击div时，我希望整个<div>（包括图像）缩小10％（使用变换）。我已经让它工作，但有一个小问题：如果用户点击div中的图像，没有任何反应，而如果用户点击div的背景，它的工作原理。
基本上，如果点击MyDiv的孩子，我怎样才能使:active的{{1}}选择器也能正常工作。
非常感谢所有帮助，我总是接受答案！
答案 0 :(得分：1)
:active伪类和div元素首先，我非常确定div元素首先不应该有激活状态。
如果我们读完user action pseudo-classes :hover, :active, and :focus section的Selectors Level 3 W3C Recommendation，我们会发现：
:active伪类在用户激活元素时应用 。例如，在用户按下鼠标按钮并释放它的时间之间。在具有多个鼠标按钮的系统上，:active仅适用于主要或主要激活按钮（通常是＆＃34;左侧＆＃34;鼠标按钮）及其任何别名。
现在，如果我们转到Interactive Content的HTML5 W3C Editor's Draft部分，我们会发现：
HTML中的某些元素具有激活行为，这意味着用户可以激活它们。
用户代理应允许用户手动触发具有激活行为的元素，例如使用键盘或语音输入或通过鼠标单击。当用户以非点击方式触发具有已定义激活行为的元素时，交互事件的默认操作必须是对元素执行合成点击激活步骤。
我在HTML401建议书中提到了HTML5编辑器草案，因为HTML401文档没有详细介绍激活状态或用户交互。但它确实提到了a元素等元素的激活，但在定义div元素时没有提及它。
div element 没有具有＆＃34;激活状态＆＃34;在HTML5推荐中定义。它没有交互式内容类别（与the a element不同），并且没有声明可以将活动状态应用于它。
如上所述，div元素不应接受:active状态。出于这个原因，我要修改HTML以使用一个元素。为此，我使用a元素：
<a href="javascript: void(0)">
<img />
</a>
现在仅此一项并不能解决IE问题。如果您看到this JSFiddle example，则点击img元素时，a容器未处于活动状态。那么我们可以做些什么来解决这个问题？我没有使用:hover:active，而是使用:hover:focus：
a:hover:active,
a:hover:focus {
outline: 0; /* Reset the default anchor tag focus style. */
background: #f00;
}
这为我们提供了与IE和所有其他浏览器类似的功能，如JSFiddle demo所示。
这种方法的问题在于元素将保持其聚焦状态，现在您可以通过使用键盘的选项卡键访问元素来实现此效果。每当您将鼠标悬停在焦点状态的元素上时，其样式都会发生变化。但是，我不能决定这是否是一种不良副作用。
您的元素现在是一个链接。首先需要href属性才能将元素集中在一起。
由于我们现在使用a元素而不是div元素，因此我们需要重置任何将您的元素区分为链接的浏览器默认样式。为此，我们可以简单地说：
a {
color: #000; /* Reset the color to black. */
cursor: default; /* Reset the cursor to default. */
text-decoration: none; /* Remove the underline. */
}
a img {
border: none; /* Remove border from image. */
}