0

0

“+”是什么css选择器

青灯夜游

青灯夜游

发布时间:2022-11-24 20:41:28

|

3162人浏览过

|

来源于php中文网

原创

在css中,“+”是相邻兄弟元素选择器,用于选择紧接在另外一元素后的元素,并且它们具备一个相同的父元素;换句话说,E和F两元素具备一个相同的父元素,并且F元素在E元素后面且相邻,这样就可使用相邻兄弟元素选择器来选择F元素,语法“E + F”。

“+”是什么css选择器

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

相邻兄弟元素选择器(E + F)

相邻兄弟选择器能够选择紧接在另外一元素后的元素,并且他们具备一个相同的父元素,换句话说,EF两元素具备一个相同的父元素,并且F元素在E元素后面,并且相邻,这样咱们就可使用相邻兄弟元素选择器来选择F元素。

这里面有2个关键信息:(1)紧接在另一元素后;(2)二者有相同父元素

立即学习前端免费学习笔记(深入)”;

例子①:





  
    
        
        
        
        
        
        
    
    
        
      

第零个段落

第一个段落

第二个段落

第三个段落

第四个段落

div+p表示选取了所有位于

元素后的第一个

元素

上述“第零个段落”和“第一个段落”没有被选中,是因为它们都嵌套在了

标签中,而不是标签后面的元素;

“第二个段落”被选中,是因为这个

标签是

标签后的第一个

元素,且有相同的父元素

“第三个段落”和“第四个段落”没被选中是因为它们不是

标签后紧邻的

标签

纯CSS实现的卡片切换效果
纯CSS实现的卡片切换效果

这是一款纯 CSS 实现的卡片切换效果,原理是通过单选按钮 radio 选择不同的按钮后,再使用 CSS 选择器选中对应的内容显示。

下载

假如希望"第三个段落"也被选中,则需要使它的

标签也在

标签之后紧邻,如下

如果

标签不是紧邻

,如下

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

div+p{}表示的是选取

后紧邻的

元素,但是上面代码div标签后紧邻的是标签,也就是它会选择

标签后紧邻的标签,

标签没有紧邻

标签,所以就选不到

元素了

例子②:





  
    
        
        
        
        
        
        
    
    
        
        
  • List item 1
  • List item 2
  • List item 3
  1. List item 1
  2. List item 2
  3. List item 3

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

首先分析选择器样式:li+li{},字面意思是选取所有位于

  • 标签后的第一个
  • 元素
  • (1) 很显然第一个

  • 标签不会选中,因为它前面不是
  • (2) 第二个

  • 标签会选中,因为它是第一个
  • 标签紧邻的
  • 标签;

    (3) 第三个

  • 标签也会选中:因为第三个
  • 标签的上一个标签也是
  • 标签,也满足css选择器li+li{}的条件:
  • 标签后的第一个
  • 元素

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

  • (学习视频分享:css视频教程

    相关专题

    更多
    c++ 根号
    c++ 根号

    本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

    42

    2026.01.23

    c++空格相关教程合集
    c++空格相关教程合集

    本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

    46

    2026.01.23

    yy漫画官方登录入口地址合集
    yy漫画官方登录入口地址合集

    本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

    202

    2026.01.23

    漫蛙最新入口地址汇总2026
    漫蛙最新入口地址汇总2026

    本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

    341

    2026.01.23

    C++ 高级模板编程与元编程
    C++ 高级模板编程与元编程

    本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

    16

    2026.01.23

    php远程文件教程合集
    php远程文件教程合集

    本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

    100

    2026.01.22

    PHP后端开发相关内容汇总
    PHP后端开发相关内容汇总

    本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

    73

    2026.01.22

    php会话教程合集
    php会话教程合集

    本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

    75

    2026.01.22

    宝塔PHP8.4相关教程汇总
    宝塔PHP8.4相关教程汇总

    本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

    67

    2026.01.22

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Sass 教程
    Sass 教程

    共14课时 | 0.8万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3万人学习

    CSS教程
    CSS教程

    共754课时 | 23.3万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号