兄弟选择器(+和~)

原创 2018年04月16日 15:22:05

1. + 选择器

  如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
  
  比如:

<style type="text/css">
    h1 + p {
        margin-top:50px;
        color:red;
    }
</style>


<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

  效果如图:
  这里写图片描述
  兄弟只会印象下面的p标签的样式,不影响上面兄弟的样式。
  注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。
  当然这个也会循环查找,即当两个兄弟元素相同时,会一次循环查找:
  示例:
  

<style type="text/css">
    li + li {
        color:red;
    }
</style>

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

  效果:
  这里写图片描述
  可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。

  2. ~ 选择器
  作用是查找某一个指定元素的后面的所有兄弟结点。
  示例代码:
  

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>
</head>
<body>
    <p>1</p>
    <h1>2</h1>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>

  运行结果:
  

  这里写图片描述

兄弟选择器(+ 和 ~)

1. + 选择器  如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。      比如: h1 + p { margin-top:50p...
  • u014291497
  • u014291497
  • 2016-01-08 14:51:41
  • 13100

CSS相邻兄弟选择器和普通相邻兄弟选择器

看字面意思很难区别,直接上代码看效果 相邻兄弟选择器: 菜鸟教程(runoob.com) div+p { background-color:yellow; } Welcom...
  • qq_21163257
  • qq_21163257
  • 2016-11-14 21:55:26
  • 2921

CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器

CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器   1.子元素选择器。选择作为某元素的子元素的元素。 格式:父元素 > 子元素 {声明} 例如: h1 > strong { c...
  • wulinbanxia
  • wulinbanxia
  • 2016-10-30 13:35:24
  • 854

选择器之相邻兄弟选择器、后代选择器、子代选择器

相邻兄弟选择器相邻兄弟选择器困扰我很久了,从字面上理解感觉还是很好理解,但是就是不会使用,也是查了很多资料,最后才真正的解决了,也能够比较正常的使用。下面是我整理的一些相关笔记。选择相邻兄弟 如果需...
  • ZYY88886666
  • ZYY88886666
  • 2016-12-20 11:37:47
  • 300

相邻兄弟选择器(+)

今天在做导航栏的时候,需求里面需要实现一个小的动画效果,需求:导航栏中,鼠标移入每个链接,链接字体颜色发生改变,同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故,动画使用JQuer...
  • bingkingboy
  • bingkingboy
  • 2016-03-31 17:12:26
  • 4369

css_day02_各种选择器基本使用(相邻兄弟选择器+,兄弟选择器~)

1.交集选择器格式: 选择器1选择器2{ } 效果:2.并集选择器 . . . . . . . . . . 今天是17年08月05日,因为之前的学习不是和扎实,导致现在...
  • YJ_meditation
  • YJ_meditation
  • 2017-07-20 00:06:51
  • 161

HTML5中CSS3的相邻选择器、兄弟选择器以及not选择器

HTML5中CSS3的相邻选择器、兄弟选择器以及not选择器
  • qq_37768482
  • qq_37768482
  • 2017-05-09 17:19:03
  • 663

jquery 孩子和兄弟选择器

Jquery 孩子和兄弟选择器分为4类,1 后代选择器(A B) ;2 孩子选择器(A>B) ;3相邻兄弟选择器(A+B); 一般兄弟选择器(A~B). 以下让我们通过一个例子来理解它们的不同。  ...
  • taiyb
  • taiyb
  • 2014-10-30 23:16:57
  • 9701

CSS选择器:属性选择器+后代选择器+子元素选择器+相邻兄弟选择器+伪类+伪元素

http://www.w3school.com.cn/css/css_selector_attribute.asp
  • kungfu_panda
  • kungfu_panda
  • 2014-08-20 15:05:35
  • 2851

css交集选择器、并集选择器、兄弟选择器

一,交集选择器 15-css交集选择器.html
  • haha_hello
  • haha_hello
  • 2017-02-10 12:31:32
  • 15506
收藏助手
不良信息举报
您举报文章:兄弟选择器(+和~)
举报原因:
原因补充:

(最多只允许输入30个字)