为一个元素后边的元素设置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. NIKTO介绍及使用方法

    1.    NIKTO:perl语言开发的开源WEB安全扫描器:识别网站软件版本:搜索存在安全隐患的文件:检查服务器配置漏洞:检查WEB Application层面的安全隐患:避免404误判(原因:很 ...

  2. 利用saltstack一键部署多台zookeeper

    以上是saltstack上面sls文件存放zookeeper的路径和文件 以上是入口文件把文件夹做成包 重要安装配置在zoo.sls,以下是该sls的内容 zookeeper: file.manage ...

  3. day23 正则，re模块

    一. 简谈正则表达式 元字符 . 除了换行符外任意字符. \w 数字.字母.下划线 \s 空白符 \b 单词的末尾 \d 数字 \n 匹配换行符 \t 匹配制表符 \W 除了数字. 字母 下划线 \D ...

  4. Codeforces70 | Codeforces Beta Round #64 | 瞎讲报告

    目录 前言 正文 A B C D E 前言 这个毒瘤的517 放了Div1 然后D题是昨天讲的动态凸包(啊喂!我还没来的及去写 结果自己想的是二分凸包 (当然没有写出来 写完前两题之后就愉快地弃疗 C ...

  5. DDMS_Threads的简单使用

    title: DDMS_Threads的简单使用 date: 2016-07-20 00:44:35 tags: [DDMS] categories: [Tool,IDE] --- 概述 本文记录在 ...

  6. python os.walk详解

    os模块大全详情 os.walkos.walk方法,主要用来遍历一个目录内各个子目录和子文件. os.walk(top, topdown=True, onerror=None, followlinks ...

  7. python清空列表的方法

    1.大数据量的list,要进行局部元素删除,尽量避免用del随机删除,非常影响性能,如果删除量很大,不如直接新建list,然后用下面的方法释放清空旧list. 2.对于一般性数据量超大的list,快速 ...

  8. Django之自带认证

    自带登录实例 {% extends "layout/base.html" %} // 所有link {% block body %} <div id="contai ...

  9. 第一章 HTML介绍

    1.1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就 ...

  10. “Hello World!“”团队第七周召开的第三次会议

    今天是我们团队“Hello World!”团队第七周召开的第三次会议.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.todo list 六.会议照片 七.燃尽图 八.代码 一 ...