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

是否有"以前的兄弟"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 元素,该

70820

理解css相邻兄弟选择器

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

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

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

    41730

    css基础选择器哪些

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

    53340

    前端学习笔记之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...li+li选择是第二个li,同理也可以理解成紧跟着第二个li兄弟,即是第三个li,当然是在同一个级别下。所以出现第二、三li被选中。 参考

    96940

    一、前端基础-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,其他不受影响。

    78210

    选择器gt_css基本选择器

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

    80910

    编写高效CSS选择器

    CSS规范并没有明确浏览器如何去实现样式系统,仅仅是说明了它们必须这样做。...选择器最后面的部分即为关键选择器(即用来匹配目标元素那部分,而不是该元素祖先元素)。...只有当标签规则标签匹配时该规则才被检查。通用规则始终都会检查。 高效 CSS 指南 避免通用规则 请确保规则不以通用类型选择器作为结束!...不用标签名或classes来限定 ID 规则 不要用标签名限定 class 规则 尽量使用最具体类别 避免后代选择器 标签分类规则不要包含子选择器 在使用子选择器地方想想为什么 依赖继承 使用 -...使用局部样式表 如非必要则避免特定浏览器渲染特征 本文内容主要来自MDN中CSS开发指南

    67340
    领券