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来查看伪类可以产生的差异。

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

喝彩！

css兄弟结点选择器,兄弟选择器CSS相关推荐

css设置兄弟元素样式-兄弟选择器
有一种选择器就叫兄弟元素选择器,分为临近兄弟和普通兄弟. 临近兄弟(相邻):用 + 表示,只匹配该元素后边的第一个同级元素. 普通兄弟:用 - 表示,匹配该元素后边的所有同级元素. 1.相邻兄弟元素 ...
CSS学习笔记｜MDN-CSS选择器
记录在MDN学习CSS中的一些个人笔记. 选择器种类通配选择器或叫全局选择器.选中所有元素. * {} 标签.类.ID选择器标签选择器.选择所有的 h1 元素 h1 { } 类选择器.选择类名有 ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
CSS概念，引入，选择器
概念层叠样式表,定义如何显示HTML元素. 使用方式行内样式不推荐使用此方式结构和样式的杂糅会影响后期的维护 <p style="color: red"> ...
CSS学习04之层次选择器
回顾什么是选择器在 CSS 中,选择器是选取需设置样式的元素的模式. 选择器的作用 CSS 选择器用于"查找"(或选取)要设置样式的 HTML 元素. 方便我们对元素添加样式. ...
CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
CSS / CSS3（新增）选择器及优先级原则
文章目录一.CSS基本选择器 1.通用选择器 * 2.元素(标签)选择器 3.类选择器 4.ID选择器 5.群组选择器二.关系选择器 1) 后代选择器 2) 子元素选择器 3) 兄弟选择器三.c ...
apache伪静态把css 排除掉_（02）CSS 选择器详解 | CSS
原创:itsOli @前端一万小时本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 伪类选择器有哪些?2. ...
html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...

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

css兄弟结点选择器,兄弟选择器CSS相关推荐

最新文章

热门文章