Question

如果我将以下javascript函数与CSS选择器值一起使用 “＃game ..screen.active” 作为参数

var activeScreen = document.querySelectorAll("#game  .screen.active")[0];

以上语句将使用
将文档元素分配给 activeScreen 变量 id =“ game”和class =“ screen”，当前为活动屏幕。

我有以下问题：
1.是真的，在任何时间点只有一个活动屏幕吗？
2.如果您提供个以上 CSS选择器作为 querySelectorAll（）函数的参数，
是否需要像下面的语句一样使用逗号（'，'）分隔它们？

var activeScreen = document.querySelectorAll("#game,  .screen.active")[0];

以上两个语句之间有什么区别，一个带有逗号，另一个不带
逗号？

我的index.html的结构

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Game</title>

    <link rel="stylesheet" href="styles/main.css" />
    <script src="scripts/gameEngine.js"></script>
</head>
<body>
    <div id="game">
        <div class="screen" id="splash-screen">
            <h1 class="logo">Ninja <br/>Warrior</h1>
            <span class="continue">Click to continue</span>
        </div>
        <div class="screen" id="main-menu"></div>
        <div class="screen" id="game-screen"></div>
        <div class="screen" id="high-scores"></div>    
    </div>
</body>
</html>

html javascript

Answer 1

使用querySelectorAll时，您可以使用其中的逗号,来指定多个选择器。用空格分隔ID，类名称，元素名称等是后代选择。

因此，通过使用#game .screen.active，您说的是目标#game的具有类屏幕且具有激活类的子元素。因此，您可以定位多个元素，但它们不包含#game元素。

但是，通过使用#game, .screen.active，您既可以同时定位{strong> #game元素，也可以同时定位具有screen和active两个类的任何元素。

Refer to this article from the Mozilla Developer Network about combinators and selectors

Answer 2

是真的，在任何时间点只有一个活动屏幕吗？

不一定。您可以有更多选择，并且可以在该课程中被选中。您可以对其进行控制（但要避免重复输入ID）。

如果您提供多个CSS选择器作为querySelectorAll（）函数的参数，是否需要像下面的语句一样使用逗号（'，'）分隔它们？

Yes

#game .screen.active的意思是：在{strong> id .screen

.active

#game

#game, .screen.active的意思是：让我得到具有#game和.screen类的ID .active 和的东西（无论内部还是外部） #game）

以下两个使用querySelectorAll（）的语句有什么区别？

我的index.html的结构

2 个答案: