仅当表格具有一定的列跨度时，如何在表格中设置 td 的样式？

Question

我有一个最多两列的表。 有时某些行的列跨度为 2。这些行的内部是按钮：

 @charset "UTF-8"; * { padding: 0; margin: 0; } input, button { font-size: 23px; } body { font-family: MontSerrat-Regular, sans-serif; font-size: 30px; text-align: center; }.default-toplevel-container table { margin-top: 30px; margin-left: auto; margin-right: auto; }.default-toplevel-container input[type=text] { border-radius: 7px; border: 2px solid black; padding: 10px; width: 450px; }.default-toplevel-container input[type=submit] { text-decoration: none; background-color: #008DB9; color: white; padding: 10px; border: none; }.default-toplevel-container input[type=submit]:hover { color: #00D084; transition: 0.3s; cursor: pointer; } /* NEW CV TABLE */.newcvtable { border-spacing: 5px 15px; }.newcvtable td:first-child { text-align: right; }.newcvtable textarea { border-radius: 10px; border: 2px solid black; padding: 10px; width: 450px; height: 170px; font-size: 19px; }.newcvtable td button { text-decoration: none; background-color: #008DB9; color: white; padding: 10px; text-align: center; border: none; }.newcvtable button:hover { color: #00D084; transition: 0.3s; cursor: pointer; }

 <div class="default-toplevel-container"> <table class="newcvtable"> <tr> <td>First name:</td> <td><input type="text"> </tr> <tr> <td>Last name:</td> <td><input type="text"> </tr> <tr> <td>Email:</td> <td><input type="text"> </tr> <tr> <td>Phone:</td> <td><input type="text"> </tr> <tr> <td>Place:</td> <td><input type="text"> </tr> <tr> <td>Summary:</td> <td><textarea></textarea></td> </tr> <tr> <td>Skills:</td> <td><textarea></textarea></td> </tr> <tr> <td>Experience name:</td> <td><input type="text"> </tr> <tr> <td colspan="2"><button>Add experience</button></td> </tr> <tr> <td>Project name:</td> <td><input type="text"> </tr> <tr> <td colspan="2"><button>Add project</button></td> </tr> </table> </div>

我希望这些按钮居中，而其他列跨度为 1 的 td 向右对齐：

右对齐执行此 css 部分：

.newcvtable td:first-child {
    text-align: right;
}

但是它也对齐按钮（因为它们是第一个孩子，但列跨度为 2）。

我试过了：

.newcvtable td:first-child:not(button) {
    text-align: right;
}

, 但它不起作用。

如何在只有特定列跨度的表中设置 td 的样式？ 就我而言： 1。

Answer 1

使用属性选择器，排除那些设置了 colspan="2" 的 TD：

.newcvtable td:first-child:not([colspan="2"]) {
    text-align: right;
}