向内联样式添加选择器

Question

有没有办法向内联样式添加选择器？我正在尝试创建一些仅 CSS 交互，但无法使用外部 CSS 文件或在文档中定义 CSS 样式。所以我必须将它们全部放入样式属性中。

我发现了这个：

CSS

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

超文本标记语言

<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 示例