如何为表中的每个单元格提供不同的内容

Question

我正在尝试使用内容nth-chid()方法在表格中放置4个箭头，顶部，左侧，右侧和底部，我有一个包含3行3列的表格，nth-child()可以使用第一行，但是当我想要更改时nth-child(4)不起作用，因为它已针对整个列进行了更改。 表：

<div class="help-block">
    <table class="css-context-explorer-orientation-widget">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>   
</table>
</div>

请找到CSS here and Fiddle示例

Answer 1

在这种情况下，您正在使用nth-child。您可能还希望同时定位nth-child元素的tr，然后定位到下面的第1个，第2个或第3个td。

选择器将是这样的：

.help-block .css-context-explorer-orientation-widget tr:nth-child(2) td:nth-child(3):before

以第2行第3列为目标。

这是一个更新的小提琴：https://jsfiddle.net/gz7fc4hL/6/

Answer 2

你应该这样使用 -

＆＃13;

＆＃13;

.help-block  td {
    width: 3em;
    height: 3em;
    border: 1px solid #eee;
}

.help-block  td:before {
    font-family: icons;
    content: "\e04f";
    position: absolute;
}
.help-block tr:nth-child(1)  td:nth-child(1):before {
    font-family: icons;
    content: "1";
}
.help-block tr:nth-child(1)  td:nth-child(2):before {
    font-family: icons;
    content: "2";
}
.help-block tr:nth-child(1)  td:nth-child(3):before {
    font-family: icons;
    content: "3";
}
.help-block tr:nth-child(2)  td:nth-child(1):before {
    font-family: icons;
    content: "4";
}
.help-block tr:nth-child(2)  td:nth-child(2):before {
    font-family: icons;
    content: "5";
}
.help-block tr:nth-child(2)  td:nth-child(3):before {
    font-family: icons;
    content: "6";
}
.help-block tr:nth-child(3)  td:nth-child(1):before {
    font-family: icons;
    content: "7";
}
.help-block tr:nth-child(3)  td:nth-child(2):before {
    font-family: icons;
    content: "8";
}
.help-block tr:nth-child(3)  td:nth-child(3):before {
    font-family: icons;
    content: "9";
}

＆＃13;

<div class="help-block">
	<table class="css-context-explorer-orientation-widget">
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>	
</table>
</div>

＆＃13;

＆＃13;

＆＃13;