Question

是否有将选择器添加到内联样式？我试图创建一些仅CSS的交互，但我不能使用外部CSS文件或在文档中定义CSS样式。所以我必须将它全部放入样式属性中。

我发现了这个：

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代码放入内联样式属性？我正在处理严格限制我允许的代码的系统。

Answer 1

如果必须，你可以把它扔到你的街区上方吗？我真的很想知道你正在使用什么样的系统限制你无法编辑样式表......

<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

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>

这是Documentation

但主要的不满意并不支持所有浏览器。

将选择器添加到内联样式

2 个答案: