css后代选择器和子元素选择器的区别 说明 1、后代选择器使用空格作为连接符号,子元素选择器使用>作为连接符号。 2、后代选择器选中所有的特定后代标签,子元素选择器选中所有的特定的直接标签。...后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标 签中的特 定标签都会被选中 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签...单纯用后代选择器很难做到吧!... 以上就是css...后代选择器和子元素选择器的区别,希望对大家有所帮助。
派生选择器用的很多,派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别。...1、css后代选择器 语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,...为后代选择器。...2、css子元素选择器 语法:h1>em{color:red;} 表示的是从h1开始里面的第一层em元素变成红色,h1为祖先,em为儿子,就像世袭制一样,只能传给儿子,孙子和其他堂亲都不行,例如 <style...3、相邻兄弟选择器 语法:h1 + p {margin-top:50px;} 表示是“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”这是官方的说法,理解的误区在于这个加号,h1
文章目录 一、子元素选择器 1、语法说明 2、代码分析 3、代码示例 二、交集选择器 1、语法说明 2、代码示例 一、子元素选择器 ---- 1、语法说明 子元素选择器 可以选择 某个基础选择器...选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法 : 父选择器 写在前面 , 子选择器 写在后面 , 两个选择器之间使用 > 大于号隔开 ; 父选择器...>子选择器 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:属性值3; } 注意 : 子选择器 只能从 父选择器 选择出的标签 的 亲儿子元素 中选择 元素 ; 子选择器 只能 从...父选择器 选择出的元素的 亲儿子 元素 中选择 , 孙子元素 和 重孙子元素 选择不到 ; CSS 基础选择器 : 标签选择器 类选择器 ID 选择器 通配符选择器 2、代码分析 在下面的代码中 ,...下面是 交集选择器 , 获取 p标签选择器 与 .red类选择器 交集元素标签 ; /*交集选择器 p标签选择器 与 .red类选择器 交集元素*/ p.red { color: red
文章目录 一、基础选择器与复合选择器 二、后代选择器 1、语法说明 2、示例分析 3、完整代码示例 一、基础选择器与复合选择器 ---- CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS...选择器 ; 复合选择器 可以 更精准 更快速 地 选择 目标元素标签 ; 二、后代选择器 ---- 1、语法说明 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组...; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2... 内部文本 内部文本 父选择器 设置为 类选择器 .father , 子选择器 设置为 标签选择器...设置为 类选择器 .gradefather , 子选择器 也设置为 类选择器 .father2 , 孙子选择器 设置为 标签选择器 label , 那么将 label 标签内的文本设置为红色 , 则可以使用如下样式
文章目录 一、并集选择器 1、语法说明 2、代码示例 二、并集选择器与后代选择器示例 1、添加注释 2、HTML 结构 3、后代选择器 1 4、后代选择器 2 5、并集选择器 6、完整代码示例 7...逗号隔开 ; 基础选择器1,基础选择器2,基础选择器3 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:属性值3; } 注意 : 基础选择器可以是任何类型的基础选择器 ; 子选择器...只能 从 父选择器 选择出的元素的 亲儿子 元素 中选择 , 孙子元素 和 重孙子元素 选择不到 ; CSS 基础选择器 : 标签选择器 类选择器 ID 选择器 通配符选择器 2、代码示例 代码示例...span> div标签 red类 div标签 h1标签 执行效果 : 二、并集选择器与后代选择器示例...---- 1、添加注释 CSS 中的注释 : /* CSS 注释 */ HTML 中的注释 : <!
css子元素选择器的介绍 说明 1、子元素选择器只会查找儿子, 不会查找其他被嵌套的标签。 2、子元素选择器之间需要用>符号连接, 并且不能有空格。...3、子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器。 子元素选择器可以通过>符号一直延续下去。 作用: 找到指定标签中所有特定的直接子元素, 然后设置属性。...格式: 标签名称1>标签名称2{ 属性:值; } 以上就是css子元素选择器的介绍,希望对大家有所帮助。
一般 hover 效果只用在自身元素和控制子元素,那么可以直接用 CSS 控制兄弟元素的 hover 效果吗?...答案是可以的,不过只能控制相邻的元素,具体示例代码如下: 1、如果 #b 元素是 #a 元素的子元素,可以直接通过 #a:hover #b {...} 这种方式来控制。...示例代码如下: #a:hover #b{ color:green; } 2、#b 与 #c 是亲兄弟关系,有相同的父节点,且 #b 跟...示例代码如下: #b:hover + #c{color : red;} HTML元素: 元素1 元素2... 元素3
前两天不知道是哪位同学问的问题,鼠标滑过一个div的时候,怎么控制子集元素属性的出现和隐藏,然后我说用用mouseover和mouseout这两个鼠标事件就行,那如果js不怎么熟悉的时候,可以用CSS:...方法: 使用a 控制其他块的样式: 使用a控制a的子元素 b: .a:hover .b { background-color:blue;
在CSS的探索之旅中,伪类和伪元素无疑为我们的样式设计增添了无限可能。它们不仅能够帮助我们精确地定位文档中的元素,还能实现丰富的交互反馈和视觉效果。...本文旨在深入浅出地探讨CSS伪类与伪元素的核心概念、常见问题、易错点及其规避策略,并通过实例代码加深理解。...双冒号与单冒号的使用 问题描述:CSS3规范中,伪元素推荐使用双冒号(::),而伪类仍使用单冒号(:),但在旧版浏览器中,双冒号可能不被支持。...:hover与子元素伪类结合:通过:hover与子元素伪类如:first-child结合,可以实现复杂的交互效果。...掌握它们的关键在于理解其背后的逻辑与应用场景,以及不断实践以避免常见的陷阱。希望本文能成为你探索CSS高级选择器路上的一盏明灯。
知识点一: CSS概念:CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆。...知识点二: 选择器格式与部分属性: 写法: 选择器{属性:值;属性:值} 选择器是一个选择(一/多个)标签的过程。 ...三:ID选择器: 特点:一个ID选择器在一个页面只能调用一次。如果使用两次或多次以上,是不符合w3c规范的,JS调用会出现问题。 一个标签只能调用一个ID选择器。 ...:yellow; } 二:后代选择器: 选择器特点:后代选择器首先要满足包含(嵌套关系) 父集元素在前,子集元素在后。 ...: 选择器+,+选择器+,选择器{属性:值;} 特点:某些元素或部分元素的属性完全相同,则他们可以写在一块。
CSS层次选择器 选择器 说明 M N 后代选择器,选择M元素内部后代N元素(所有的N元素) M>N 子代选择器,选择M元素内部子代N元素(所有第1级N元素) M~N 兄弟选择器,选择M元素后所有的同级...M N 相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素) 1.后代选择器 后代选择器:选中元素内部中所有的指定的某个元素,包括子元素和其它后代元素。...-- #first p:会选中id为first元素的所有后代p元素。 --> ? 后代选择器示例11.png 2.子代选择器 子代选择器:选中元素内部的某一个子元素,只限子元素。...(2)子代选择器与后代选择器区别 后代选择器,选取的是元素内部所有的元素,包括子元素。 子代选择器,选取的是元素内部某一个元素,只限子元素。 (3)示例 ① 例1 <!...CSS3非常强大,能实现非常多很棒的效果,以后一定要去学习一下CSS3。
在css中,选择器可以获取元素,为其添加css样式;但zepto框架与css选择器相比,它更加强大,因为zepto选择器为元素添加的是行为,行为的添加使得页面的交互更加丰富多彩。...zepto层次选择器与css的相同之处都是更具元素与其父元素、子元素、兄弟元素之间的关系构成的选择器,但使用zepto层次选择器为最佳选择。 ? 1)后代选择器 <!...在这里可以看出后代选择器顾名思义,只要是后代都可以选择。 2)子选择器 <!...但在实现效果中仅仅背景变成pink了但字体颜色仍是默认的黑色,即找不到id为parent的元素里的p(子)元素,因为在上面的代码中p元素属于child元素的子元素,故找不到元素。...在这里可以看出子代选择器顾名思义,只能干涉子元素而对子元素以外的后代元素确实无能为力了。 3)相邻元素选择器 <!
CSS选择器 使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。...#s5 ~ .s6{ color: #FFD700; } 子元素选择器 子元素选择器 子元素选择器不被选择 子元素选择器不被选择 /* 伪类与伪元素参考 https://github.com/WindrunnerMax/EveryDay/blob/master...div>子元素选择器不被选择 子元素选择器不被选择
相信正在学习Web前端知识的小伙伴们都知道,学习Web前端开发基础技术需要掌握:HTML、CSS、JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! ...在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流 二、CSS样式是表现 就像网页的外衣,比如:标题字体、颜色变化...三、JavaScript是用来实现网页上的特效效果 比如:鼠标滑过弹出下拉菜单、鼠标滑过表格的背景颜色改变、焦点新闻的轮换。 可以理解为:有动画的、有交互的一般都用JavaScript来实现。...代码注释: 在CSS中的注释语句:用/*注释语句*/来标明 在Html中使用来标明 HTML选择器的问题: 后代选择器与子选择器的区别 子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代...而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。 总结: >作用于元素的第一代后代,空格作用于元素的所有后代。
在介绍之前,我们先理解下文档结构树的父子关系 在学习CSS选择器之前,我们需要弄清楚文档结构的父子关系,什么是父元素、子元素以及祖辈元素和后代元素这些概念,清楚了这些逻辑关系后,你才能更好的掌握CSS选择器...与ID选择器的区别就是可以重用。定义多个元素的样式,好比按组进行归类,同一类的样式统一定义。...浏览器兼容性: IE6+ Firefox Chrome Safari Opera 4、X Y:后代选择器 后代选择器,英文名称:descendant selector,本文的开头我们学习了什么是后代元素...还有一个需要注意的,后代元素的层级问题,可能会很深。...浏览器兼容性: IE7+ Firefox Chrome Safari Opera 8、 X > Y:子元素选择器 有时候我们并想选择所有的后代元素,而是想缩小范围,只选择一个元素的子元素,比如我们只想选择
将 标签样式 直接写在 HTML 标签元素 的 内部 , 使用 style 标签属性设置 CSS 样式 , 将 CSS 样式信息 与 特定的 HTML 标签元素 直接关联在一起 ; 缺点 :...只能控制当前 HTML 标签的样式 , 每个标签都要写一遍样式 , 会 造成代码冗余 ; 没有实现 样式 与 结构分离 ; ...后代选择器 可以选择 子元素 , 孙子元素 , 不限制选择层数深度 ; 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组 ; 后代选择器 语法 : 父选择器 和...子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:属性值3; } 子元素选择器...子元素选择器 只能 选择亲儿子元素 , 不能选择 孙子元素 ; 子元素选择器 可以 选择 某个基础选择器 选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法
在介绍之前,我们先理解下文档结构树的父子关系 在学习CSS选择器之前,我们需要弄清楚文档结构的父子关系,什么是父元素、子元素以及祖辈元素和后代元素这些概念,清楚了这些逻辑关系后,你才能更好的掌握CSS选择器...与ID选择器的区别就是可以重用。定义多个元素的样式,好比按组进行归类,同一类的样式统一定义。...浏览器兼容性: IE6+ Firefox Chrome Safari Opera 4、X Y:后代选择器 后代选择器,英文名称:descendant selector,本文的开头我们学习了什么是后代元素...还有一个需要注意的,后代元素的层级问题,可能会很深。...+ Firefox Chrome Safari Opera 8、 X > Y:子元素选择器 有时候我们并想选择所有的后代元素,而是想缩小范围,只选择一个元素的子元素,比如我们只想选择 #container
{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式"作用于网页中的哪些元素 标签选择器:html代码中的标签 p{pont-size... 子选择器 即大于符号(>),用于选择指定标签元素的第一代子元素 例子: 1 <!...包含(后代)选择器 即加入空格,用于选择指定标签元素下的后辈元素 注:与子选择器的区别:子选择器仅是指它的直接后代,或者可以理解为作用于子元素的第一代后代 ...而后代选择器是作用于所有子后代元素。...通用选择器 匹配html中所有标签元素 例子: 1 <!
p span{color:red;} 这行代码意为只选择作为p元素的span元素 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代...而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。...子选择器 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。...请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。...后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。 总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
组合选择符说明了两个选择器直接的关系。 CSS组合选择符有几种,都是什么?...在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以波浪号分隔) 后代选择器 后代选择器用于选取某元素的后代元素...div p { background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。...div>p { background-color:yellow; } 相邻兄弟选择器 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素...div+p { background-color:yellow; } 后续兄弟选择器 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
领取专属 10元无门槛券
手把手带您无忧上云