CSS相邻兄弟选择器

相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素。

  

代码一:<body>
  <h1>This is a heading.</h1>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
  <p>This is paragraph.</p>
</body>

使用选择器
h1 + p{
     color: red;
}

效果:

这里只会选择第一个p元素,原因是只有第一个p元素与h1关系是紧接着的构成相邻兄弟,第一个p元素之后的p都不与h1紧接着。

      代码二:  <body>
             <li>111</li>
             <li>111</li>
             <li>111</li>
         </ul>
         <ol>
             <li>111</li>
             <li>111</li>
             <li>111</li>
         </ol>
    </body>

  

  使用选择器

  li + li {
      color: red;
  }

  效果:

  

  为什么每一个li都应用了样式啊?

  因为第二个li之后,每两个li之间都直接都构成了紧接着的li + li关系,所以都被选中了

时间: 2024-12-11 09:48:48

CSS相邻兄弟选择器的相关文章

CSS 相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector). 例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写: h1 + p {margin-top:50px;} 这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”. 亲自试一

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

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器 相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器 比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red

CSS 组合选择符:后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器

CSS 组合选择符 CSS 组合选择符 在 CSS3 中包含了四种组合方式:CSS组合选择符包括各种简单选择符的组合方式. 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选择器 后代选择器用于选取某元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 divp{background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Child sel

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

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开]相邻兄弟选择器的标识为:+ 如:h1 + p {margin-top:50px;}[h1和p之间用+隔开] ②功能不一样:后代选择器(descendant selector),又称为包含

子选择器、相邻兄弟选择器

今天新学习的关于css的各种选择器,其中子选择器和相邻兄弟选择器比较重要,可以大大的减少文档中class特性的数量.下面用一个简单的例子介绍一下他们的用处. 事例中需要表达的样式为: 第一个段落无边框也无背景色: 所有<div>中的段落都有边框: 最后3个段落背景色为灰色: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Conten

web前端入门到实战:相邻兄弟选择器(+)、子选择器(&gt;)、兄弟选择器(~)等用法

前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(>).兄弟选择器(~).first-child.:last-child.:nth-child().:nth-last-child()的用法. 相邻兄弟选择器(+) 相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素.注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符.器. <!

CSS相邻元素选择器

相邻元素选择器的定义是:可以选择紧接在另一个元素后的元素.并且这两个元素都有同样的父元素.由此可见,关键的两个条件是"紧接在"和"同一父元素".普通的写法是: CSS相邻元素选择器

CSS之后代选择器与多类选择器

<新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子元素选择器 ----CSS 相邻兄弟选择器 那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素: /*方式1*/p span{...}/*方式2*/p .A{...} 注意,上述代码的两个选择器间以空格空格空格分隔.另外,后代选择器

CSS之固定定位,绝对定位+负边距,双飞翼布局,属性选择器,伪类选择器补,状态伪类选择器,相邻全部兄弟选择器,取非选择器,em与rem,变形效果

固定定位: 绝对定位+负边距 !!!!!!!!!!!!!!!!!!!超重要 负边距 双飞翼布局 属性选择器 伪类选择器 补 状态伪类选择器 相邻全部兄弟选择器 取非选择器 em与rem 变形效果 固定定位: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { height: 1200px; backgr