在没有 Javascript 的情况下更改自定义 CSS 属性？答案

【问题标题】：Changing custom CSS attributes without Javascript?在没有 Javascript 的情况下更改自定义 CSS 属性？
【发布时间】：2013-11-16 05:00:26
【问题描述】：

所以我正在做一些 wiki 编辑，遗憾的是没有启用 Javascript。因此，我需要 CSS 大师的帮助！

我知道您可以像这样添加自定义 HTML 属性：

<span id="some-id" custom_attr="no"></span>

您可以像这样使用custom_attr 设置元素的样式：

span[custom_attrib] { /* styling here */ }

现在，有没有办法在 CSS 中编辑 HTML 属性？

示例（当然不起作用..）：

<!------------- CSS ------------>
<style>
  .some-class {
    /* Original code here */
  }
  .some-class[custom_attr = "yes"] {
    /* Change code here */
  }

  #some-id:hover ~ .some-class[custom_attr = "no"] {
    custom_attr : "yes";
  }
</style>

<!------------- HTML ------------>
<html>
...
<span id="some-id">...</span>
<span class="some-class" custom_attr="no">...</span>
...
</html>

【问题讨论】：

不，你不能用 CSS 改变 attr
Now, is there a way to edit the HTML attribute inside the CSS?号

标签： html css pseudo-class

【解决方案1】：

当然你可以用 CSS 编辑 HTML！

从您的示例代码来看，当用户 hovers 使用它时，您似乎想将“否”更改为“是”。方法如下：

http://jsfiddle.net/ENZQU/

<a default="YES" mouseover="NO"></a>

a {
    font-size: 3em;
}
a:after {
    content: attr(default);
}
a:hover:after {
    content: attr(mouseover);    
}

您是否希望它改为click？简单！

http://jsfiddle.net/ENZQU/1/

<input id="cbox" type="checkbox">
<label for="cbox"></label>

#cbox {
    display: none;
}
label {
    font-size: 3em;
}
label:after {
    content: "YES"
}
#cbox:checked + label:after {
    content: "NO"
}

不过，我强烈建议您找到另一种方法来执行此操作。 wiki 不希望您动态更改页面上的内容，并且可能出于某种原因以这种方式构建。

【讨论】：

您还可以通过:focus 添加点击切换状态，前提是您在HTML 中添加tabindex 属性：jsfiddle.net/shshaw/ENZQU/4

【解决方案2】：

很遗憾，您无法使用 CSS 更改 HTML 代码，而只能使用 JavaScript 来做到这一点。

Andy Davies 在她的 personal blog 中向 CSS 提出了该功能。我认为这是一个非常有趣的提议。您可以查看并加入由 Andy Davies here 创建的讨论。

CSS 3 太棒了，我们怎么知道在不久的将来 CSS 是否会有类似的东西？

问题是：

您真的不能在您的页面中使用 JavaScript？这是您更改 HTML 代码的唯一方法，CSS 只是样式化 HTML。

您可以肯定that in the W3C，他们是“开发网络”的人。

【讨论】：

感谢您的回答。我知道 CSS 仅用于样式。但是人们已经用纯 CSS 做了一些令人惊奇的事情，包括下拉菜单和选项卡式文档。 hover 伪类很棒，但遗憾的是没有办法在鼠标点击时改变状态。
然而@Jacob-IT，正如你所说，CSS 3 真的很棒。我已经等不及 CSS 4 了。想知道 CSS 3 的创造力和作用，请看这个链接：muktware.com/2013/11/developer-creates-simpsons-entirely-css/…
已编辑答案，希望对您有所帮助。