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

CSS 相邻兄弟选择器

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

69120
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端学习笔记之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

    96140

    相邻兄弟选择器用什么符号连接两个元素

    相邻兄弟选择器使用的符号CSS中,相邻兄弟元素选择器使用“+”加号来连接两个两个元素选择器。...语法如下:选择器1+选择器2{属性: 属性值;}相邻兄弟选择器选择的哪个兄弟元素据个人的编程经验,相邻的兄弟选择器匹配选择的一般是写在选择器1匹配到的元素1后面的那个元素2,而不是写在元素1前面的元素。...相邻兄弟选择器实例代码下方实例,设置了三个段落p元素,并通过中间的元素使用相邻兄弟选择器来匹配选择相邻的兄弟元素,并设置样式。...的样式被设置:段落1段落2段落3 #p1 + p{color:green;font-size:1.5em;}原文:相邻兄弟选择器用什么符号连接两个元素免责声明

    21120

    js与jQuery的区别以及jQuery选择器和方法的使用

    目录 使用jQuery js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 ---- js与jQuery代码对比 jQuery选择器:用来选中元素 基本方法 使用jQuery jQuery...官网:http://jquery.com/ 为什么要学jQuery:可以简化JavaScript开发,jQuery中包含有:选择器,CSS样式,HTML事件处理,JS动画 以及丰富的插件等等,而且浏览器兼容性很高...案例1:点击按钮获取文本框中的值(JS对比jQuery),如下图 JS版: jQuery版: 先引入jQuery库 jQuery选择器:用来选中元素         1.1基本选择器         ...选择器还可以组合多个一起使用,可以分为并集和交集。...并集:selector1,selector2,用逗号隔开 交集:selector1 selector2 用空格隔开 下面我们用代码分别实现一下不同选择器实现效果的方式: 案例2:使用基本选择器改变元素背景色和字体颜色

    15.4K10

    使用 :has() 选择前一个相邻元素

    这使得构建可以针对元素的先前同级元素的 CSS 选择器变得不可能,但是has:()伪类(以及来自选择器级别 4 的、 和)已经抛弃了旧的限制,并在使用时开辟了一个充满可能性的:not()新世界选择器。...在此之前,如果您不针对或不支持 Firefox,或者使用polyfill ,则可以使用伪类。...选择前第 n 个兄弟#https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-the-nth-previous-sibling 可以使用相邻同级组合器来选择另一个之前的任何特定元素...我们可以使用两个相邻的同级组合器来选择前第二个同级: .box:has(+ * + .circle) { width: 40px; height: 40px; } 如果您愿意,您可以将选择器的范围等同于一个类...如果你想选择前第三个同级,你可以使用三个相邻的同级组合器...... .box:has(+ * + * + .circle) { width: 40px; height: 40px; }

    29830

    【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )

    文章目录 一、 ID 选择器 1、简介 2、代码示例 二、通配符选择器 1、简介 2、代码示例 三、CSS 选择器使用注意事项 一、 ID 选择器 ---- 1、简介 ID 选择器 使用 " #...id " 选择 指定的 某一个 标签 , 使用 ID 选择器 步骤如下 : 首先 , 在 HTML 中 设置 标签的 ID ; 标签内容 然后 , 在 CSS 样式中使用...* ID 选择器 与 类选择器使用方法基本一致 ;** 在开发时 , ID 选择器 不推荐使用 , 使用频率不高 , 推荐使用选择器 ; 2、代码示例 代码示例 : <!...:20px; } 通配符选择器 会降低 页面的 打开速度 , 如果没有特殊情况 , 不推荐使用 ; 2、代码示例 通配符选择器代码示例 : 使用通配符选择器 * 将 HTML 所有页面标签的文本设置成了...---- CSS 选择器使用注意事项 : 尽量不使用 ID 选择器 ; 尽量不使用 通配符选择器 ; 使用标签选择器时 , 尽量不对 无意义的标签 进行选择 , 如 div , span 标签 ;

    2.7K10

    网页|Zepto框架层次选择器

    zepto层次选择器与css的相同之处都是更具元素与其父元素、子元素、兄弟元素之间的关系构成的选择器,但使用zepto层次选择器为最佳选择。 ? 1)后代选择器 <!...在这里可以看出子代选择器顾名思义,只能干涉子元素而对子元素以外的后代元素确实无能为力了。 3)相邻元素选择器 //相邻元素选择器 $("#d1+p").css("background-color...相邻元素选择器选择的是元素之后的相邻对应元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink,在实现的效果中可以看到只有p2变成了粉色。...在这里可以看出相邻元素选择器顾名思义,其选择的元素只能是后面紧邻的元素。 4)同辈元素选择器 <!

    84010

    使用CSS选择器进行元素定位

    在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才是经常需要用到的。...之前有专门讲过使用xpath对元素定位的使用,下面要介绍css选择器来进行元素定位。...【参见W3C官网说明】 http://www.w3school.com.cn/cssref/css_selectors.asp 先看看css选择器定位的webdriver函数: def find_elements_by_css_selector...选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素...选择所有紧接着元素之后的元素 2 [attribute] [target] 选择所有带有target属性元素 2 [attribute=value] [target=-blank] 选择所有使用

    3.1K50

    如何使用CSS伪类选择器

    选择器通常在样式表中使用。...你可能想使用像Sass这样的方案,但这可能给一些开发团队引入复杂性。 嵌套可能会导致其他问题。构建深度嵌套的选择器是很容易的,但它会变得越来越难以阅读以及输出冗长的CSS。...如有必要可以同时删除article p和:is()选择器来应用蓝色,因为:where()选择器的优先级比两者都低。 更多的代码库会使用:is()而不是:where()。...*/ h2 { margin-block-start: 2em; } :has()伪类选择器 :has()选择器使用了类似于:is()和:where()的语法,但它的目标是一个包含其他元素的元素。...它在Safari 15.4+[11]和Chrome 105+[12]可用,但是到2023年应该可以广泛使用。 总结 :is() 和 :where() 伪类选择器简化了 CSS 语法。

    2.2K40
    领券