html - table/html 中的子选择器规则

Question

▸ 要获得正确的方向字母和双向箭头布局，请使用带有表格值的 CSS 显示属性。对于表格行和单元格，使用 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{
   display: table;
}
.table > div{
	display: table-row;
}
.table > div > div{
	display: table-cell;
	width: 100px;
}

<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>