17-兄弟选择器


我是标题

我是超链接

我是段落

我是段落

我是段落

我是标题

我是段落

我是段落

我是段落

-->

我是标题

我是超链接

我是段落

我是段落

我是超链接

我是段落

我是标题

我是段落

我是段落

我是段落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>17-兄弟选择器</title>

    <style>

        /*

        h1+p{

            color: red;

        }

        */

        h1~p{

            color: green;

        }

    </style>

</head>

<body>

<!--

1.相邻兄弟选择器 CSS2

作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式:

选择器1+选择器2{

    属性:值;

}

注意点:

1.相邻兄弟选择器必须通过+连接

2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2.通用兄弟选择器 CSS3

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

格式:

选择器1~选择器2{

    属性:值;

}

注意点:

1.通用兄弟选择器必须用~连接

2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

-->

<!--

<h1>我是标题</h1>

<a href="#">我是超链接</a>

<p>我是段落</p>

<p>我是段落</p>

<p>我是段落</p>

<h1>我是标题</h1>

<p>我是段落</p>

<p>我是段落</p>

<p>我是段落</p>

-->

<h1>我是标题</h1>

<a href="#">我是超链接</a>

<p>我是段落</p>

<p>我是段落</p>

<a href="#">我是超链接</a>

<p>我是段落</p>

<h1>我是标题</h1>

<p>我是段落</p>

<p>我是段落</p>

<p>我是段落</p>

</body>

</html>

H5 17-兄弟选择器的更多相关文章

  1. H5C3--属性选择器、兄弟选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. CSS 相邻兄弟选择器

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

  3. CSS相邻兄弟选择器

    相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...

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

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

  5. 兄弟选择器 E + F

    兄弟选择器在IE7下支持会有bug,特记于此 如果兄弟选择器有Html注释,兄弟选择器在IE7下会失效  代码如下 E + Fp + p{color:red} <p class="te ...

  6. web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

    1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...

  7. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  8. 使用CSS兄弟选择器完成复杂垂直边距（vertical margins）的设计

    -------------------sibling选择器如何在完成复杂设计要求的同时,保持CSS可读 这是web前端开发过程中开始简单逐步变的复杂的例子之一:将一篇文章中的所有元素应用垂直边距(ve ...

  9. 理解css相邻兄弟选择器

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

随机推荐

  1. SQL Server数据库邮件发送异常案例

      最近遇到两起关于SQL Server数据库邮件发送异常的案例,这些问题也有点意思,顺便记录一下.方便以后遇到类似问题的人参考,不要被这些问题弄得抓狂! 案例1:我们一台数据库服务器突然发送邮件都不 ...

  2. [20190214]11g Query Result Cache RC Latches补充.txt

    [20190214]11g Query Result Cache RC Latches补充.txt --//上午测试链接:http://blog.itpub.net/267265/viewspace- ...

  3. 验证对Random的两个猜想

    猜想1:Random.Next()产生的随机数不会有重复. 猜想2:大量级执行Random.Next(int i)分布在各个数值上的概率是均匀的. 验证猜想1 /*如果Random.Next()产生的 ...

  4. SQL Server has encountered 1 occurrence(s) of cachestore flush for the 'Object Plans' cachestore (part of plan cache) due to some database maintenance or reconfigure operations.

    2017-11-01 09:49:44.35 spid166 SQL Server has encountered 1 occurrence(s) of cachestore flush for th ...

  5. iOS In-App Purchase（IAP）内购服务端二次验证注意事项

    前端iOS完成对应的商品购买之后,会得到一个Transaction(交易)的数据结构指针,后端实际上只需要这个结构内的一个东西,那就是 transaction.transactionReceipt. ...

  6. [Hive_4] Hive 插入数据

    0. 说明 Hive 插入数据的方法 && Hive 插入数据的顺序 && 插入复杂数据的方法 && load 命令详解 1. Hive 插入数据的方法 ...

  7. AI学习---回归和聚类算法

    其他 资料链接:https://pan.baidu.com/s/1ofN2QFxpzC-OtmTFE2fHfw 提取码:o4c2

  8. php学习----基本介绍及数据类型

    php 官方手册:http://php.net/manual/zh/ 1.PHP(全称 Hypertext Preprocessor,超文本预处理器的字母缩写)是一种服务器端脚本语言,它可嵌入到 HT ...

  9. February 16th, 2018 Week 7th Friday

    Full of luck, health and cheer. We wish you a Happy Chinese New Year! 春节快乐,万事如意! From Shanbay. Today ...

  10. zTree获取当前节点的下一级子节点数

    使用zTree插件实现树形图中,需要获取当前点击的父节点的子节点数的需求,使用treeNode.children获取子节点数据集合,使用length方法获取集合长度.将当前节点的treeNode传入即 ...