HTML相玲选择器,CSS 相邻元素选择器

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

选择相邻兄弟

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

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

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

亲自试一试

语法解释

相邻兄弟选择器使用了加号(+)，即相邻兄弟结合符(Adjacent sibling combinator)。

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

请看下面这个文档树片段：

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

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

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

亲自试一试

结合其他选择器

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

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

CSS 子元素选择器与后代选择器区别实例讲解

css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)

通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

CSS之元素选择器

1.后代元素选择器 div p 以空格分隔,表示div的所有后代p元素 2.子元素选择器 div > p 以大于号分隔,表示div的直接子元素 3.相邻兄弟选择器 div  + p 选择紧接在d ...

理解css相邻兄弟选择器

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

CSS 相邻兄弟选择器

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

CSS相邻兄弟选择器

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

This is a heading.

< ...

css伪元素选择器

css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

css 伪元素选择器

/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...

随机推荐

通过手动创建统计信息优化sql查询性能案例

本质原因在于:SQL Server 统计信息只包含复合索引的第一个列的信息,而不包含复合索引数据组合的信息 来源于工作中的一个实际问题, 这里是组合列数据不均匀导致查询无法预估数据行数,从而导致无法选 ...

nodejs的第五天学习笔记

一.调试nodejs代码 1)使用console.log() 使用麻烦,用了以后还要删除 2)nodejs的自带调试器 -node debug a.js 没有任何作用,一个玩具,将来有一天可以会变得强 ...

iis 重新注册 &period;net 方法

dhl:IIS注册ASP.NET 1.1.2.0.4.0_在win7下如果先安装vs2010 后安装iis7的话,必须注册iis才可以用.~~~!!鄙视微软   IIS中ASP.NET的版本号此时可选 ...

Java 7 的7个新特性

1.对集合类的语言支持:(??) 2.自动资源管理: 3.改进的通用实例创建类型推断:(??) 4.数字字面量下划线支持:(√) 5.switch中使用string:(√) 6.二进制字面量:(√) ...

Epoll&comma;Poll&comma;Select模型比较

http://blog.csdn.net/liangyuannao/article/details/7776057 先说Select: 1.Socket数量限制:该模式可操作的Socket数由FD_S ...

Lua学习笔记(四)：表和数组

表 在Lua中,表(table)是十分重要的一种数据结构,实际上Lua对于复杂数据类型也仅提供了表给我们,我们通过表可以实现我们需要的大部分重要的数据结构,比如数组. table类型实现了关联数组,关 ...

Spring cloud zuul跨域(一)

项目背景:我们有web和大屏,以及移动端,需要访问微服务接口. 然而大屏时自己打开的网页,在网页中通过js调用我的webapi.出现了跨域情况. 原因:出现这个问题,是由于跨域请求有2次请求. 第一次 ...

Django 的命令及简单例子

第一步:下载mysql驱动 cmd进入创建好的django项目目录:然后使用下面的命令创建一个项目testdj.  sudo /usr/lib/python3/dist-packages/djang ...

&period;htaccess技巧&colon; URL重写&lpar;Rewrite&rpar;与重定向

URL重定向是.htaccess的重头戏,它可以将长地址转为短地址.将动态地址转为静态地址.重定向丢失的页面.防止盗链.实现自动语言转换等.笔者觉得难点是在正则表达式的运用和理解上.有关htacces ...

Python入门 序列章

内置函数range range([start,] stop[, step]) 第一个参数表示步长(默认为0),第二个参数表示终止值(结果中不包括这个值),第三个参数表示步长(默认为1, 实验发现不能用 ...