css - Sass 可以按位置选择元素吗？

Question

有桌子，没有idwithtd

<table id='mytable'>
   <tr>
     <td>
         I want to right without id 
     </td>

     <td>
         I want to left without id
     </td>
    </tr>
</table>

如何使第一个td右对齐和第二个左对齐的内容？

Answer 1

是的，您可以通过 CSS 来实现。

用这个：

table tr td:nth-child(1){
}
table tr td:nth-child(2){
}

像很多人一样。这是参考站点。

1. 第n个孩子。
2. 偶数。

Answer 2

使用 CSS，您可以使用：

:nth-child

td:nth-child(an+b)

• a 是比率（或斜率），或者其中 1 = 每个元素，2 = 每个其他元素，3 = 每三个元素，依此类推。

• n 是一个常数。它实际上是 n。只是 n。并且仅在您使用 a 时使用。

• b 是子选择器的初始位置（或 y 截距）。意思是 + 1 将从找到的第一个元素开始，+3 将是第三个...... b 不能为负也不能为零。

但是，此方法不适用于 IE8（因为不支持 CSS3 伪类 =< IE8），因此，如果您支持 IE8，则可以使用一点 jQuery... 或尝试类似Selectivizr的方法，其中使用 js shim 来支持 IE6-8 和 CSS3 选择器，比如 nth-child。

您可以做的另一件事是给每一行偶数/奇数类（或 column-xyz-1、column-xyz-2 等），并以这种方式设置样式……因为这为您提供了管理样式的同等灵活性...

Answer 3

我看到你只有两个元素可以使用。

除了已经提到的nth-child伪类之外，您还可以使用+相邻的兄弟组合器：

td {
  /* Styles for the first element */
}

td + td {
  /* Styles for all elements except the first*/
  text-align: right;
}

IE 从版本 7 开始支持此组合器！