向内联样式添加选择器

Question

有没有办法在内联样式中添加选择器？我正在尝试创建一些纯CSS交互，但我不能使用外部CSS文件或在文档中定义CSS样式。因此，我必须将所有内容都放入style属性中。

我找到了这个：

CSS

:checked + div {display: block !important;}

HTML

<div class="span3"><label for="an1">press me</label></div>
<input id="an1" type=checkbox style="display:none;"><div style="display: none;"> hidden</div>

当点击“按我”时，将显示隐藏文本。

有没有办法将CSS代码放入内联样式属性中？我正在处理一个严重限制我的允许代码的系统。

- user3373860

---

你希望它的表现如何？ - Richa

你知道在文档中几乎任何位置都可以放置<style>元素，包括在div中吗？虽然大多数浏览器今天不支持作用域，但你可以随时添加一个ID来替代它。 - Denys Séguret

可能是重复的问题：如何在内联CSS中编写a:hover？ - towc

可能是CSS伪类与内联样式的重复问题。 - Patsy Issa

Answer 1

如果必要的话，你能否将它随意放置在你的 block 上面？我很想知道你使用的系统有哪些限制，以至于无法编辑样式表...

<style type="text/css">#an1:checked + div {display: block !important;}</style>
<div class="span3">
    <label for="an1">press me</label>
</div>
<input id="an1" type=checkbox style="display:none;">
<div style="display: none;">hidden</div>

顺便说一下，:checked 是一个伪选择器，只能从样式表中执行，所以你所要求的是不可能的。

编辑：有一种方法可以做到这一点...虽然不太好，但是它可以解决问题。

<div class="span3">
    <label for="an1" onclick="document.getElementById('an1').style.cssText = 'display: block;'">press me</label>
</div>
<input id="an1" type=checkbox style="display:none;">
<div style="display: none;">hidden</div>

jsFiddle Example

的英译中文为：

{{链接1：jsFiddle示例}}

。

- d3c0y

---

我深刻地意识到SPIP和内联CSS是我唯一可以使用的工具，这让我感到非常焦虑。经过无数次搜索和尝试，这个解决方案对我来说非常有效。谢谢！ - Yulia Kuznetsova

Answer 2

是的，您可以在内联样式中添加选择器。

以下是示例代码

<a href="http://www.google.org/"
      style="{color: #900}
      :link {color: #00f}
      :visited {color: #F00}
      :hover {outline: 1px solid #333333}
      :active {background: #00f}">...</a>

另一个例子

<p style="{color: #090; background-color:#FF00AA; line-height: 1.2}
      ::first-letter {color: #900}">...</p>

这里是文档

但主要缺点是不支持所有浏览器。

- Jaykumar Patel

---

在fiddle中尝试过了，但没有成功，还有这个。 - Patsy Issa