如何使用 css 更改 html 内容文本 <p>

Question

我想知道是否可以使用 CSS onclick 事件更改 <p> 的文本。我知道可以使用 Javascript。我只想知道在CSS.

中是否有办法做到这一点

Answer 1

您可以使用复选框和兄弟选择器来模拟模拟行为。

只需尝试 SO 片段：

[type="checkbox"] {
  position: relative;
  top: -9999px;
}
label > p {
  margin: 0;
  border: 1px solid #eee;
  padding: 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 20px;
}
label > p:last-child {
  display: none;
}
[type="checkbox"]:checked ~ p {
  display: block;
}
[type="checkbox"]:checked + p {
  display: none;
}

<label>
  <input type="checkbox">
  <p>Click to format disk C:/</p>
  <p>Disk C:/ was succesfully formatted :) Oh no, click to restore!!!</p>
</label>

有关已用选择器的更多链接：

如何使用 css 更改 html 内容文本 <p>

how to change html content text <p> using css

html

css

onclick