时间戳

首页 > 解决方案 > 集中游戏 - 瓷砖着色

html - 集中游戏 - 瓷砖着色

问题描述

我对编程很陌生，我正在通过尝试学习在 Make school 教程之后构建专注游戏来测试我的基本知识。

我正在尝试将我的“默认”图块设为灰色，但似乎无法做到这一点并且不知道我哪里出错了？

以下是我正在尝试学习构建的游戏的链接。第 4 步是造型开始的地方。

https://www.makeschool.com/academy/track/standalone/javascript-concentration-game/JavaScript-game-Tutorial

谢谢卢克。

.game-square {
    box-sizing: border-box;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

.game-square > div {
    width: 100%;
    height: 200%;
    position: absolute;
    top: 0;
}

.game-square > div > div {
    height: 50%;    
}

.game-square > div > div:first-child {
    background-color: gray;
}

.flip > div {
    top: -100%;
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Concentration Game</title>

<link href= "./styles.css" rel="stylesheet" type= "text/css">

</head>
<body>

        <div class="container">
            <div id="game">
                <button id= "reset-button">Reset</button>
                <div class= "game-square">
                <div></div>
                <div></div>
                </div>

            <div class= "game-square">
                <div></div>
                <div class="square-2"></div>
                </div>

            <div class= "game-square">
                <div></div>
                <div class="square-3"></div>
                </div>

            <div class= "game-square">
                <div></div> 
                <div class="square-4"></div>
                </div>

            <div class= "game-square">
                <div></div>
                <div class="square-5"></div>
                </div>

            <div class= "game-square">
                <div></div>
                <div class="square-6"></div>
                </div>

            <div class= "game-square">
                <div></div>
                <div class="square-7"></div>
                </div>

            <div class= "game-square">
                <div></div>
                <div class="square-8"></div>
                </div>
`

标签： htmlcss

解决方案

您的 html 与教程中列出的不同（下面的代码是我在网站上看到的）。定义背景颜色的 css 以 .game-square div 深处的第一个嵌套两层为目标。你的 div 块只有一层深，所以没有什么可以着色的。 

<div class='game-square'>
  <div>
    <div>This tag will be colored!</div>
    <div></div>
  </div>
</div>

推荐阅读