如果你给元素一个标签索引，那么你可以使用:focus伪类来模拟点击。

# btnLeft:{焦点 宽度:70 px; 身高:74 px; ｝ <img id="btnLeft" tabindex="0" src="https://picsum.photos/200"/>

你能得到的最接近的是:active:

#btnLeft:active {
    width: 70px;
    height: 74px;
}

但是，这只会在按住鼠标按钮时应用样式。应用样式并保持它在click上应用的唯一方法是使用一点JavaScript。

您可以使用伪类:target来模拟打开单击事件。让我给你们举个例子。

#{东西 显示:没有; ｝ {#的东西:目标 显示:块; ｝ < a href = " #“>显示< / > < div id = "东西" >宾果!< / div >

这是它的样子:http://jsfiddle.net/TYhnb/

需要注意的一点是，这仅限于超链接，因此如果您需要在其他超链接上使用，例如按钮，您可能需要稍微修改一下，例如将超链接样式化，使其看起来像按钮。

警告!下面特别简单的回答!：）

实际上，你可以只使用CSS(并且不使用复选框hack)就有一个持久的更改(例如在单击后出现并保持可见的块/弹出窗口)，尽管这里有许多(否则正确的)答案声称，只要你只需要在悬停期间保持持久性。

所以看看Bojangles和TylerH的答案，如果它们对你有用，但如果你想要一个简单的css答案，在点击后保持块可见(甚至可以让块在后续点击后消失)，那么看看这个解决方案。

我也遇到过类似的情况。我需要一个弹出的div与onClick，我不能添加任何JavaScript或改变标记/HTML(一个真正的CSS解决方案)，这是可能的，但有一些警告。你不能使用:target技巧，可以创建一个漂亮的弹出窗口，除非你可以改变HTML(添加一个'id')，所以这是出去了。

在我的例子中，弹出式div包含在其他div中，我希望弹出式div出现在其他div的顶部，这可以使用:active和:hover的组合来完成:

/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
    position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
    display: block;
}
/* General settings for popup */
.info {
    position: absolute;
    top: -5;
    display: none;
    z-index: 100;
    background-color: white;
    width: 200px;
    height: 200px;
}

示例(以及一个允许点击弹出使它消失):

CSS-Only onClick弹出Div(没有Javascript或HTML更改!)

我还在下面插入了一个代码片段示例，但在Stack Overflow沙箱中的定位是奇怪的，所以我不得不把“点击这里”文本放在innerDiv之后，这通常是不需要的。

/* Outer div - needs to be relative so we can use absolute positioning */ .clickToShowInfo { position: relative; } /* When clicking outer div, make inner div visible */ .clickToShowInfo:active .info { visibility: visible; } /* And hold by staying visible on hover */ .info:hover { visibility: visible; } /* General settings for popup */ .info { position: absolute; top: -10; visibility: hidden; z-index: 100; background-color: white; box-shadow: 5px 5px 2px #aaa; border: 1px solid grey; padding: 8px; width: 220px; height: 200px; } /* If we want clicking on the popup to close, use this */ .info:active { visibility: hidden; /* Doesn't work because DCEvent is :active as well */ height: 0px; width: 0px; left: -1000px; top: -1000px; } <p /> <div class="clickToShowInfo"> <div class="info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </div> Click here to show info </div> <p />

我有一个问题的元素，必须是红色的悬停和蓝色的点击，而悬停。要用CSS实现这一点，你需要例如:

h1:hover { color: red; }
h1:active { color: blue; }

<h1>This is a heading.</h1>

我挣扎了一段时间，直到我发现CSS选择器的顺序是我所遇到的问题。问题是我换了位置，主动选择器不工作了。然后我发现:hover先去，然后:active。

根据您想要做的事情，让焦点保持变化可能是一种选择?

<button></button>

<style>
  button {
    width: 140px;
    height: 70px;
    background: url('http://www.ranklogos.com/wp-content/uploads/2015/06/Stack-Overflow-Logo.png');
    background-size: cover;
  }
      
  button:focus {
    width: 240px;
    height: 120px;
  }
</style>

https://jsfiddle.net/anm92d0r/

注意，这对image标签不起作用。但根据你的元素id，我假设你在寻找按钮功能。