JavaScript CSS选择器

Question

我正在阅读一些JavaScript尝试创建自己的滑块，但遇到了一些让我感到困惑的东西。 有一条CSS规则如下：

html.js #slideshow .slides img
{
    position: absolute;
}

说明说该规则仅在JavaScript可用时才适用。 现在我有点困惑...如果浏览器中提供JavaScript，是否可以应用此规则？ 还是在HTML页面中包含了文件“ html.js”，或者是否包含了JavaScript文件？

提前致谢。

Answer 1

这是一种使用javascript将类“ js”添加到html标签的技术。 没有javascript，没有js类。 使CSS非常容易知道是否启用了JS。

Answer 2

可能在页面中您的头上有一个脚本，该脚本将js类添加到根元素

这样可以确保仅当客户端上有javascript时才应用CSS规则。 当然，如果无法使用javascript，则脚本不会插入该类。

这是一种现代方法，专门用于防止未样式化内容（FOUC）的闪烁

Answer 3

您看到的页面可能正在使用Modernizr 。 它是一个JavaScript库，可检测用户浏览器中的HTML5和CSS3功能，并通过向HTML元素添加“ no-js”类来工作，并且当页面加载Modernizr时，将其替换为要测试的规则集。

如果要在浏览器中测试特定功能，请访问Modernizr网站以获取更多详细信息。

在您不希望使用Modernizr的情况下，您可以将JavaScript直接放置在<title>标记中，以实现JavaScript：

<script>
    document.documentElement.className = document.documentElement.className.replace(/(\s|^)no-js(\s|$)/, '$1' + 'js' + '$2');
</script>