今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”，刚开始对这个概念有些不太理解，通过查阅资料并且经过一些试验总算有了些头绪。

原文解释是“相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。”

这里面有2个关键信息：（1）紧接在另一元素后；（2）二者有相同父元素

例子①：

<!DOCTYPE html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title></title>

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>

        div+p{

            background-color: aqua;

        }

        </style>

    </head>

    <body>

        <!--[if lt IE 7]>

            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>

        <![endif]-->

      <div>

          <p>第零个段落</p>

          <div>

              <p>第一个段落</p>

          </div>

      </div>

      <p>第二个段落</p>

      <p>第三个段落</p>

      <p>第四个段落</p>

    </body>

</html>

div+p表示选取了所有位于 <div> 元素后的第一个 <p> 元素

上述“第零个段落”和“第一个段落”没有被选中，是因为它们都嵌套在了<div>标签中，而不是标签后面的元素；

“第二个段落”被选中，是因为这个<p>标签是<div>标签后的第一个<p>元素，且有相同的父元素<body>；

“第三个段落”和“第四个段落”没被选中是因为它们不是<div>标签后紧邻的<p>标签

 
假如希望"第三个段落"也被选中，则需要使它的<p>标签也在<div>标签之后紧邻，如下

如果<p>标签不是紧邻<div>，如下

可以看到“第二个段落”没有被选中，因为相邻兄弟选择器选择的是紧接在一个元素后的元素

div+p{}表示的是选取<div>后紧邻的<p>元素，但是上面代码div标签后紧邻的是<span>标签，也就是它会选择<div>标签后紧邻的<span>标签，<p>标签没有紧邻<div>标签，所以就选不到<p>元素了

例子②：

<!DOCTYPE html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title></title>

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>

        li+li{

            background-color: aqua;

        }

        </style>

    </head>

    <body>

        <!--[if lt IE 7]>

            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>

        <![endif]-->

        <ul>

            <li>List item 1</li>

            <li>List item 2</li>

            <li>List item 3</li>

        </ul>

        <ol>

            <li>List item 1</li>

            <li>List item 2</li>

            <LI>List item 3</LI>

        </ol>

    </body>

</html>

一开始特别纳闷为啥“List item 2”和“List item 3”都被选中了~~~

首先分析选择器样式：li+li{}，字面意思是选取所有位于 <li> 标签后的第一个 <li> 元素

(1) 很显然第一个<li>标签不会选中，因为它前面不是<li>；

(2) 第二个<li>标签会选中，因为它是第一个<li>标签紧邻的<li>标签；

(3) 第三个<li>标签也会选中：因为第三个<li>标签的上一个标签也是<li> 标签，也满足css选择器li+li{}的条件：<li>标签后的第一个<li>元素

正因为css选择器的样式为li+li{}，所以代码中的li标签就可以一直套用这个“公式”。

如有错误，敬请指正，不吝赐教！

2018-05-19 23:26:10

理解css相邻兄弟选择器的更多相关文章

  1. CSS 相邻兄弟选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...

  2. CSS相邻兄弟选择器

    相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...

  3. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  4. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

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

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  6. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

  7. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  8. CSS 相邻元素选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素.选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使 ...

  9. css 通用兄弟选择器( ~ )

    stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...

随机推荐

  1. 【题解】Luogu P2146 [NOI2015]软件包管理器

    题面:https://www.luogu.org/problemnew/lists?name=2146 这道题要用树链剖分,我博客里有对树链剖分的详细介绍 这道题就是树链剖分的模板,详细解释见程序. ...

  2. Educational Codeforces Round 40 (Rated for Div. 2) Solution

    从这里开始 小结 题目列表 Problem A Diagonal Walking Problem B String Typing Problem C Matrix Walk Problem D Fig ...

  3. vsCode设置中文

    1.安装软件之后,关闭欢迎界面,Ctrl+shift+p打开命令窗口,输入lang,选择configuration display language,改为 "locale":&qu ...

  4. topcoder srm 530 div1

    problem1 link 对于每个还未切掉的‘X’用cutter作用一次.从左上角到右下角,依次判断即可. problem2 link 首先,如果一个顶点不能从0到达或者不能到达节点$n-1$,那么 ...

  5. 赞 ( 84 ) 微信好友 新浪微博 QQ空间 180 SSD故事会（14）：怕TLC因为你不了解！【转】

    本文转载自:https://diy.pconline.com.cn/750/7501340.html [PConline 杂谈]从前,大家谈TLC色变:如今,TLC攻占SSD半壁江山.是的,这个世界就 ...

  6. 彻底地/ 终于地, 解决 关于apache 权限的问题了:: 修改 DocumentRoot后的 403错误: have no permission to access / on this server

    目录的权限都 应该设置 为 drwxr_xr_x, 即755, 而html下的文件的权限设置为; 644 即可! -x 只有目标文件对某些用户是可执行的或该目标文件是目录时才追加x 属性. -w权限, ...

  7. POJ 1191 棋盘分割（区间DP）题解

    题意:中文题面 思路:不知道直接暴力枚举所有情况行不行... 我们可以把答案转化为 所以答案就是求xi2的最小值,那么我们可以直接用区间DP来写.设dp[x1][y1][x2][y2][k]为x1 y ...

  8. 卸载linux系统上自带的mysql

    步骤: 1.打开centos命令提示符,切换为root用户 2.输入rpm -qa|grep -i mysql命令以检查系统含有的mysql插件,回车,若没有则说明无自带mysql,系统很干净.若有显 ...

  9. Windows Service application 初步探索

    今天写了一个windows service程序, 本身这个程序是一个console application, 但是不能够通过F5直接运行, 会出现下面图片所示的错误: 提示说需要安装一个Instalu ...

  10. VirtuablBox 出错： VERR_SUPLIB_OWNER_NOT_ROOT 解决方法

    刚刚把 VirtualBox 升级, 从 3.2 到 4.0.4 后,虚拟机上的系统无法运行, 提示: VERR_SUPLIB_OWNER_NOT_ROOT 查了一下,发现是因为 /opt 的 own ...