进一步阅读

Question

我正在开发一个用于在IE8中打印的CSS ，因为我没有高级css选择器（http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/）我将它们连接起来就像这样

我需要修改表格中的某些列（例如，将第8列设为红色，将第9列设置为更长，将更短的第10列设置为... ecc）

问题是我是否使用

td+td+td{ /*instead of td:nth-child(3) on modern browsers*/
 set something...
}

从第3个到最后一个的所有td都有“设置内容”

所以要解决它我必须做的事情

td+td+td+td{
 unset something
}

所以我修好了，但想知道为什么会这样呢？

Answer 1

为什么不直接在列上放置类名并直接设置样式？它消除了多版本的黑客攻击。

Answer 2

a + b表示：“如果前面有b，请选择a”。
td+td+td表示：如果td前面有<td>，请选择td+td+td。

（见图）
每个 X 由td+td+td+td选择每个 Y 由<td> 1 1 = default <td> 2 1 2 1 = default <td> X 2 1 3 2 1 <--- X = style X <td> X 2 1 Y 3 2 <--- X and Y = style X, but reset to default by Y <td> X 2 Y 3 <--- X and Y = style X, but reset to default by Y <td> X Y <--- X and Y = style X, but reset to default by Y选择要选择第三个兄弟，必须组合两个选择器。

{{1}}

Answer 3

+表示相邻的选择器。

td+td { }通常意味着，如果td前面有另一个td，则应用某个规则

又一个例子：

a + p {}通常意味着，如果p位于a之后，则应用某些规则。

所以你正在使用的样式表

td+td+td会将样式应用于第三个元素之后的每个td。 ^{这可能有点复杂，需要明确。}让我们看看一组<td>

的例子

<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>

你的规则

td + td + td {
    /* apply something */
}

以上规则将适用于两个不同的集合

第一个，从<td>1</td>到<td>3</td>的相邻兄弟匹配td+td+td
第二个，从<td>2</td>到<td>4</td> 的相邻兄弟匹配td+td+td

所以最后，来自<td>3</td>的所有选择器最终得到了样式

要取消此效果，请在样式表上重置添加第四个选择器的规则。即

td + td+ td + td {
  /* cancel the effect
  This will catch <td>-4</td> and apply the reset rule */
}

希望能够解释它。

请解释这个css

3 个答案:

进一步阅读