css3的相邻选择器,CSS选择器之相邻兄弟选择器

选择器是css里面非常重要的一部分知识，根据不同的样式定义,CSS提供了不同类型的选择器，大家可以根据自己的实际情况选择合适的选择器来编写代码，前面的课程我们对类选择器，子元素选择器等作了介绍，下面让我们一起来探讨一下相邻兄弟选择器。

一、定义

相邻兄弟选择器(Adjacentsiblingselector)可选择紧接在另一元素后的元素，且二者有相同父元素。

例如，如果要改变紧接在h2元素后出现的段落的字体颜色，可以这样写：

h2 + p {color:green;}

二、语法解释

1.选择器的读法

h2 + p {color:green;}

这个选择读作:“选择紧接在h2元素后出现的段落，h1和p元素拥有共同的父元素”。

2.选择器的结合符

由上面的代码,我们可以清楚地知道,相邻兄弟选择器的结合符是“+”。

注意：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

接下来,我们先看一个文档树片段:

在上面的片段中，div元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。这个很容易理解！

这里，我们需要注意一点：第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

我们再来看一段代码：

运行效果如下：

很明显,第一个p元素应用了规则，即表明第一个p元素与h2元素是相邻兄弟。

特别提示：用一个结合符只能选择两个相邻兄弟中的第二个元素。如上面的代码，选择器只会把第一个p元素改变了字体颜色,而其他的p元素字体颜色并没有发生改变。

三、结合其他选择器

相邻兄弟结合符还可以结合其他结合符

嘻嘻，这个选择器一眼看上去，是否有一种摸不着头脑的感觉。其实这个选择器解释为：选择紧接在table元素后出现的所有兄弟ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素。

好了，相邻兄弟选择器的相关内容，今天就简单地介绍到这里。希望大家课后能在与其他选择器结合使用这一块多作尝试，为日后能合理正确使用选择器打下坚实的基础。如果您想了解更多不同类型的选择器，欢迎继续关注我们的课课家网站喔！

css3的相邻选择器,CSS选择器之相邻兄弟选择器相关推荐

【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器伪类选择器根据 ...
〖大前端 - 基础入门三大核心之CSS篇④〗- CSS选择器之元素关系选择器、序号选择器与属性选择器
说明:该文属于大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
CSS选择器之复合选择器
复合选择器: 目的是为了可以选择更准确更精细的目标元素标签复合选择器是由两个或多个基础选择器通过不同的方式组合的 1.后代选择器又称为包含选择器作用:用来选择元素或元素的 ...
基础html交代选择器,html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
jquery选择器连续选择_JQuery中的选择器
jquery选择器连续选择 It's time to write some JQuery now. Do check out the introductory article on JQuery fi ...
CSS基础（四）-- CSS选择器之标签选择器
随笔记录方便自己和同路人查阅,学习CSS时最好先学会HTML. #------------------------------------------------我是可耻的分割线----------- ...
〖大前端 - 基础入门三大核心之CSS篇②〗- CSS选择器之标签选择器、id选择器、class选择器与原子类
说明:该文属于大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
〖大前端 - 基础入门三大核心之CSS篇③〗- CSS选择器之复合选择器与伪类
说明:该文属于大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...

css3的相邻选择器,CSS选择器之相邻兄弟选择器

css3的相邻选择器,CSS选择器之相邻兄弟选择器相关推荐

最新文章

热门文章