Question

刚刚发现the CSS tilde selector，看起来它可能是一种处理切换输入可见性的优雅方式。

我想到的用例是当你只想在勾选复选框时向用户显示输入。目前我使用javascript执行此操作并将侦听器附加到每个复选框，然后搜索DOM以查找适当的输入并切换类。

所以问题是，为什么这么糟糕？如果不是，为什么这不普遍？为什么我们用.js而不是CSS呢？在我看来，他们都以非常相似的方式操纵表示层......

资源的奖励积分。

Answer 1

HTML是模型，它包含数据
CSS是View，它包含样式
JS是Controller，它包含Interactions

这种MVC结构可以实现强大的责任委派。如果要更改页面上窗口小部件的状态，可以使用JavaScript更改可用的样式挂钩：

_{jQuery用于简洁}

$('#button').on('click', function () {
    $('#widget').toggleClass('hidden');
});

<子> CSS：

.hidden {
    display: none;
}

使用此结构可以轻松更改交互的执行方式。如果您稍后决定应该动画小部件，那么这是一个简单的更改。

使用JavaScript还具有向后兼容的优势。禁用JavaScript的用户百分比非常少。虽然我强烈建议支持禁用JS的人，但通常只需默认显示所有内容，并仅为已启用JS的用户隐藏内容。

Answer 2

我想到的用例是你只想显示输入他们检查了一个复选框后给用户。

如果您计划使用:checked选择器，那么您的应用将无法在旧浏览器中运行（IE <9）。如果您对此限制没有问题，也就是说，只关注现代浏览器，那么CSS也会很好。

如果用户启用了JS，使用JS可确保您的站点也可以在旧版浏览器上运行。

你也可以混合使用它们，它将确保你的页面在现代浏览器中工作，即使禁用了JS以及支持JS的旧浏览器。

通常更容易检测浏览器是否已禁用JS（例如，使用<noscript>内的样式表），而不是确定浏览器是否支持某些CSS选择器。因此，使用JS解决方案可以轻松放置免责声明，要求用户启用JS以使页面正常工作。

但是，如果您的网站不是针对可能使用IE8及更低版本的普通公众，那么CSS解决方案就可以了。

Answer 3

我想说如果你可以使用波浪号选择器或者css一般，那就去吧。 CSS imho是一种更干净，通常更简洁和更优越的性能方式来完成与在js中切换项目相同的事情。此外，对波浪号的支持非常好 - 请参阅http://www.quirksmode.org/css/contents.html

有时您必须使用javascript来完成此操作，例如要隐藏的元素不是相关元素的兄弟或后代。