首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

是否有"以前的兄弟"CSS选择器?

是的,CSS选择器可以用来选择HTML文档中的特定元素,并对它们应用样式。在CSS选择器中,有一种选择器叫做“兄弟选择器”(sibling selector),它可以选择同一级别的相邻元素。

兄弟选择器的语法是:E ~ F,它表示选择紧跟在E元素后面的所有F元素。例如,p ~ span表示选择紧跟在<p>元素后面的所有<span>元素。

在CSS选择器中,还有一种选择器叫做“一般兄弟选择器”(general sibling selector),它可以选择同一级别上的所有元素,而不仅仅是紧跟在指定元素后面的元素。一般兄弟选择器的语法是:E ~ F,它表示选择同一级别上的所有F元素,但必须在E元素后面。例如,p ~ span表示选择同一级别上的所有<span>元素,但必须在<p>元素后面。

总之,CSS选择器中有两种兄弟选择器,它们可以选择同一级别上的相邻或所有元素,并对它们应用样式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS 相邻兄弟选择器

大家好,又见面了,我是全栈君 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。...选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。...这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。...请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器: li + li {font-weight:bold;} 上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。...相邻兄弟结合符还可以结合其他结合符: html > body table + ul {margin-top:20px;} 这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该

72420

理解css相邻兄弟选择器

在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪。...原文解释是“相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。...如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。”...标签紧邻的标签; (3) 第三个标签也会选中:因为第三个标签的上一个标签也是 标签,也满足css选择器li+li{}的条件:标签后的第一个元素...正因为css选择器的样式为li+li{},所以代码中的li标签就可以一直套用这个“公式”。

48120
  • 【说站】CSS兄弟选择器的两种类型

    CSS兄弟选择器的两种类型 1、相邻兄弟选择器,给指定选择器后面紧跟的那个选择器选中的标签设置属性。 格式: 选择器1+选择器2{     属性:值;    } 相邻兄弟选择器必须通过+连接。...相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签。 2、通用兄弟选择器, 给指定选择器后面的所有选择器选中的所有标签设置属性。...格式: 选择器1~选择器2{     属性:值;   } 通用兄弟选择器必须用~连接。 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中。...以上就是CSS兄弟选择器的两种类型,希望对大家有所帮助。

    42330

    css基础选择器有哪些

    大家好,又见面了,我是你们的朋友全栈君。 css基础选择器有哪些(熟记) 一、选择器作用:规范了页面中哪些元素能够定义好样式,同时也能帮助我们去 二、选择器分类 1....- %) 5.特殊用法-分类选择器 1、作用:将元素选择器和类选择器结合在一起,从而实现对某种元素的不同样式的细分控制 2、语法: 元素选择器.类选择器{ 样式声明; } 6.特殊引用...群组选择器 1、选择器声明以逗号隔开的选择器列表,其目的是为了声明一组选择器的公共样式 2、语法: 选择器1,选择器2,选择器3,选择器4,{ 样式声明; } 6....后代选择器 作用:用于匹配某元素的后代元素的样式 后代:一级或者多余一级的父子(层级)关系 注意:后代选择器之间用空格隔开 2. 语法: 选择器1 选择器2{ 样式声明; } 7....如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    54340

    前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别。...1、css后代选择器 语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,...2、css子元素选择器 语法:h1>em{color:red;} 表示的是从h1开始里面的第一层em元素变成红色,h1为祖先,em为儿子,就像世袭制一样,只能传给儿子,孙子和其他堂亲都不行,例如 兄弟选择器 语法:h1 + p {margin-top:50px;} 表示是“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”这是官方的说法,理解的误区在于这个加号,h1...li+li选择的是第二个li,同理也可以理解成紧跟着第二个li的兄弟,即是第三个li,当然是在同一个级别下。所以出现第二、三li被选中。 参考

    98540

    一、前端基础-css-css的选择器之组合选择器.

    -- 组合选择器 1、多元素选择器:匹配元素A或元素B,A和B之前用逗号分隔。 2、后代元素选择器:匹配所有属于A元素后代的B元素,A和B用空格分隔。...3、子元素选择器:匹配是所有A元素的子元素B,使用大于号。 4、毗邻元素选择器:匹配所有紧邻A元素之后的同级元素B,使用加号。 --> 选择器 1、在head中添加样式(演示方便,可以使用link) 2、匹配A元素的后代元素B(div标签中的p标签),其他不受影响。...4、后代元素选择器可以递归匹配多层(不止匹配第二层的p标签,还会继续往后面匹配)。...-- 子代元素选择器 1、在head中添加样式(演示方便,可以使用link) 2、匹配是所有A元素的子元素B,其他不受影响。

    78910

    CSS 选择器指南:释放选择器的威力

    CSS 选择器在样式化 Web 文档中扮演着关键角色,使开发人员能够精确地定位和样式化 HTML 元素。本指南旨在通过深入探讨各种选择器并通过实际代码示例演示它们的用法,释放 CSS 选择器的威力。...基本选择器:通用选择器:通用选择器(*)针对页面上的所有元素。...: bold;}Before 伪元素:在指定元素的内容之前插入内容:p::before { content: ">>";}结论:了解并利用 CSS 选择器对于有效的 Web 开发至关重要。...通过掌握各种可用的选择器,您可以对样式进行精细的控制,使样式表更高效和易维护。...尝试这些示例并将其整合到您的项目中,以充分发挥 CSS 选择器的潜力我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

    17760

    选择器gt_css的基本选择器

    大家好,又见面了,我是你们的朋友全栈君。...一、后代选择器 选取指定元素的后代元素 与子元素选择器相比,后代选择器选取的不一定是直接后代(儿子),而是作用于所有后代元素(儿子、孙子、重孙…)都可以。...二、(>)子元素选择器 选取某个元素的直接后代元素 与后代元素选择器相比,后代选择器选取的一定是直接后代(儿子) 三、(+)相邻兄弟选择器 选择紧连着另一元素后的元素,二者具有相同的父元素。...只会选择的一个相邻的匹配元素 四、(~)后续兄弟选择器 选取所有指定元素之后的相邻兄弟元素。...与相邻兄弟元素选择器相比,相邻兄弟元素仅仅是选择紧跟着的兄弟元素,后续元素选择器选择所有符合条件的兄弟元素 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/167051

    81210
    领券