TylerH做了一个非常好的回答，我只需要给最后一个按钮一个视觉更新。

.btn { border - radius: 5 px; 填充:10px 30px; Box-shadow: 1px 1px #000; Background-image: linear-gradient(to bottom， #eee， #ddd); ｝ .btn:{徘徊 Background-image: linear-gradient(to top， #adf， #8bf); ｝ {.btn:活跃 Margin: 1px 1px 0; Box-shadow: -1px -1px #000; ｝ # btnControl { 显示:块; 可见性:隐藏; ｝ <input type="checkbox" id="btnControl"/> <label class="btn" for="btnControl">点击我!< / >标签

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

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

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

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

实际上，你可以只使用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 />

TylerH做了一个非常好的回答，我只需要给最后一个按钮一个视觉更新。

.btn { border - radius: 5 px; 填充:10px 30px; Box-shadow: 1px 1px #000; Background-image: linear-gradient(to bottom， #eee， #ddd); ｝ .btn:{徘徊 Background-image: linear-gradient(to top， #adf， #8bf); ｝ {.btn:活跃 Margin: 1px 1px 0; Box-shadow: -1px -1px #000; ｝ # btnControl { 显示:块; 可见性:隐藏; ｝ <input type="checkbox" id="btnControl"/> <label class="btn" for="btnControl">点击我!< / >标签

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

<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，我假设你在寻找按钮功能。

下面是一个类似于JavaScript的onclick的onclick，而不是:active伪类。

这只能通过JavaScript或复选框Hack来实现。

复选框黑客本质上是让你点击一个标签，“检查”一个复选框，允许你按照自己的意愿设置标签的样式。

这个演示。

在OP澄清他想要什么之前回答了。