为一个元素后边的元素设置css样式：

语法：前一个 + 后一个。

作用：可以选中一个元素后紧挨着的指定的兄弟元素。

为一个元素后边的所有相同元素设置css样式：

语法：前一个 ~ 后边所有。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            h1 + p{

                background-color: orange;

            }

            span ~ p{

                background-color: green;

                color: white;

                font: "courier new";

            }

        </style>

    </head>

    <body>

        <h1>我是一个h1标签</h1>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <span>我是一个span</span>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <a href="http://www.baidu.com">百度</a>

        <p>我是一个p标签</p>

    </body>

</html>

效果：

前端学习 -- Css -- 兄弟元素选择器的更多相关文章

  1. 前端学习 --Css -- 子元素的伪类

    :first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...

  2. 前端学习 -- Css -- 伪元素

    :first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选中元素的最前边,一般该伪类都会结合content一起使用,通过content可以向指定位置添加内 ...

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

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

  4. 前端学习 -- Css -- 选择器的优先级

    当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示. 优先级的规则 内联样式 , 优先级 ...

  5. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  6. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  7. CSS之元素选择器

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

  8. css伪元素选择器（伪对象选择器）checked + 伪元素练习

    伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CS ...

  9. 前端之css样式（选择器）。。。

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

随机推荐

  1. mysql 从 frm 文件恢复 table 表结构的3种方法

    mysql 正常运行的时候,查看 table 的结构并不是困难的事. 但是有时 mysql 发生故障,这种方法便不再可行. 当遇到故障,通常使用新的 mysql 实例来恢复当前的数据. 建表是非常重要 ...

  2. ats 分层缓存

    了解缓存层次结构 缓存层次结构由彼此通信的缓存级别组成.ats支持多种类型的缓存层次结构. 所有缓存层次结构都识别父和子的概念. 父缓存是层次结构中较高的缓存, ats可以 将请求转发到该缓存.子缓存 ...

  3. SMR解析

    SMR描述 SMR(Shingled Magnetic Recording)叠瓦式磁记录盘是一种采用新型磁存储技术的高容量磁盘.SMR盘将盘片上的数据磁道部分重叠,就像屋顶上的瓦片一样,这种技术被称为 ...

  4. VGG——Very deep convolutional networks for large-scale image recognition

    1. 摘要 在使用非常小(3×3)的卷积核情况下,作者对逐渐增加网络的深度进行了全面的评估,通过设置网络层数达 16-19 层,最终效果取得了显著提升. 2. 介绍 近来,卷积神经网络在大规模图像识别 ...

  5. Linux命令之mount挂载

    挂载概念 Linux中的根目录以外的文件要想被访问,需要将其“关联”到根目录下的某个目录来实现,这种关联操作就是“挂载”,这个目录就是“挂载点”,解除次关联关系的过程称之为“卸载”. 注意:“挂载点” ...

  6. 第33次Scrum会议(11/21)【欢迎来怼】

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文 小组照片 二.开会信息 时间:2017/11/21 11:35~11:57,总计22min.地点:东北 ...

  7. 学习Mybatis的两个必须的jar包分享

    百度云盘:http://pan.baidu.com/s/1nuNxRcd 提取码:t765(好像不需要提取码,不太会用云盘...) 自己学习mybatis的时候去找这两个jar包也是不容易,特别分享一 ...

  8. 2017-2018-2 1723 『Java程序设计』课程 结对编程练习_四则运算

    一.结对对象 姓名:侯泽洋 学号:20172308 担任角色:驾驶员(侯泽洋) 伙伴第一周博客地址 二.本周内容 1.程序需求 (1).自动生成题目 可独立使用(能实现自己编写测试类单独生成题目的功能 ...

  9. Hibernate笔记②--hibernate类生成表、id生成策略、级联设置、继承映射

    一.多表的一个关联关系 老师和学生是一对多的关系 student:tid属性 外键约束 对应teacher表中的id属性 teacher:id 在myeclipse的db窗口中选中两个表来生成类.   ...

  10. c++工厂模式(Factory method)

    下面以女娲造黑人,白人,黄种人的例子来介绍一下工厂模式. 1.工厂的接口,相当于造人工厂总部. class IHumanFactory { public: IHumanFactory(void) { ...