css兄弟结点选择器,兄弟选择器CSS

我不得不说我没有IE 7或8，但我确实使用IE模拟器进行了测试。

你有一个ID为component-1的元素div，里面有多个div，重复的类component-2, component-3 and component-4

您可以使用类在示例中单独设置这些元素的样式。只更改第一个div(或任何div)的背景颜色的技巧是找出你需要更改的div的级别并应用CSS Pseudo class(MDN)(W3S)({ {3}})。

它相当简单。以下代码：(1)

.component-2 {

background: red;

}

将所有带有component-2类的元素应用于红色背景。

和以下代码：(2)

.component-4{

background: pink;

}

将所有带有component-4类的元素应用于粉红色背景。根据您的代码，编写上述代码的另一种方法是：(3)

.component-2 .component-4{

background: pink;

}

将component-4中具有类component-2的所有元素应用于粉红色背景。

我们知道您的代码中有多个component-2，component-3和component-4个类。

在层次结构之后，#component-1有多个component-2，component-3有component-4，所以如果我们省略#component-1，我们就会有3个带有类{{}}的div 1}}在同一层次结构上。

伪选择器具有针对各种情况的选择器(第一个孩子，最后一个孩子，第n个孩子，偶数，奇数等)。对于您的代码，您知道需要更改第一个元素的颜色。

因此，为了更改第一个component-2颜色，我们需要向上遍历树以找到重复节点。在这种情况下是component-4。选择该元素以使用伪类添加css规则的正确方法是(4)

component-2

现在我们知道无论写在容器中的任何内容都适用于类名.component-2:first-child{

/* css rules here */

}的第一个div，让我们将该类选择器应用于上面提到的选择器之一，如(3)中所述

component-2

此规则指定只有类.component-2:first-child .component-4{

/* css rules here */

}的具有类名component-2的子级的第一个div应该应用css规则。

因此，通过这样做，您将获得结果。

您可以通过将伪类更改为component-4或:last-child来查看伪类可以产生的差异。

我知道这是一个简单答案的长篇文章，但我希望你能从中学到一些东西。

喝彩！