表/ html中的子选择器规则

Question

▸要获得方向字母和双向箭头的正确布局，请使用带有表值的CSS display属性。对于表的行和单元格，请使用CSS子选择器规则，而不是类选择器规则。

我用div / row类编写了HTML，但是必须使用子选择器。如何更改并且不重写任何内容。老实说，甚至不知道如何。此表没有边框，并且行日期中的字母和带有箭头的图像。刚开始学习html / css / js。这是我的html谢谢

<div class="Heading">
    <div class="Cell">
        <p class="diagonal"><img src="dablearow.png";></p>
    </div>
    <div class="Cell">
        <h2>E</h2>
    </div>
    <div class="Cell">
        <p></p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <h2>S</h2>
    </div>
    <div class="Cell">
        <p><img src="dablearow.png" ></p>
    </div>
    <div class="Cell">
        <h2>N</h2>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p></p>
    </div>
    <div class="Cell">
        <h2>W</h2>
    </div>
    <div class="Cell">
        <p class="diagonal"><img src="dablearow.png"></p>
    </div>
</div>

Answer 1

只需使用带有“ table”标签的表格。这样会更好。您无需将该div作为建议。也请对尖括号中的单元格使用“ td”，对标题使用“ th”在表格中。所有引号都应该放在尖括号中：<>

Answer 2

我想你想要这个

    <div class="table">
        <div>
            <div>
                <p class="diagonal"><img src="dablearow.png";></p>
            </div>
            <div>
                <h2>E</h2>
            </div>
            <div>
                <p></p>
            </div>
        </div>
        <div>
            <div>
                <h2>S</h2>
            </div>
            <div>
                <p><img src="dablearow.png" ></p>
            </div>
            <div>
                <h2>N</h2>
            </div>
        </div>
        <div>
            <div>
                <p></p>
            </div>
            <div>
                <h2>W</h2>
            </div>
            <div>
                <p class="diagonal"><img src="dablearow.png"></p>
            </div>
        </div>
    </div>

css

.table{
   display: table;
}
.table > div{
    display: table-row;
}
.table > div > div{
    display: table-cell;
    width: 100px;
}