带有内联样式的可折叠列表 - 可能吗？答案

【问题标题】：Collapsible list w/ inline styles - possible?带有内联样式的可折叠列表 - 可能吗？
【发布时间】：2013-10-24 08:49:06
【问题描述】：

您好，我希望对以下代码进行一些更改，该代码表示 HTML 和 CSS 中的可折叠/可展开列表。

<html>
<head>
<style type="text/css">
.row { vertical-align: top; height:auto !important; }
.list {display:none; }
.show {display: none; }
.hide:target + .show {display: inline; }
.hide:target {display: none; }
.hide:target ~ .list {display:inline; }
@media print { .hide, .show { display: none; } }
</style>
</head>
<body>
<div class="row">
<a href="#hide1" class="hide" id="hide1">Expand</a>
<a href="#show1" class="show" id="show1">Collapse</a>
<div class="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
</html>

标签之间的 css 和内部样式表的形式，但我希望它全部作为内联样式包含在内。这可能吗？感谢您的阅读！

【问题讨论】：

你为什么要这样做？正如@Quentin 所描述的那样，这是不可能的，但是您尝试以这种方式解决的真正问题可能仍然可以解决。但我想知道它可能是什么。

标签： html css styles inline

【解决方案1】：

这是不可能的。

style 属性包含规则集的主体。

您的代码取决于选择器的使用——包括伪类和组合器——它们出现在规则集的主体之外。

【讨论】：