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. 安装.NET Core遇到的错误

    如果验证出现如下错误 Failed to load /opt/dotnet/shared/Microsoft.NETCore.App/1.1.0/libcoreclr.so, error: libun ...

  2. Jenkins2.32用户和权限管理策略

    前言 在使用jenkins的过程中,需要为不同的角色分配相应的权限,如果jenkins的用户数据能和公司现在的帐号系统结合起来那会更好. 关于如何为用户分组,我推荐使用 role based auth ...

  3. html 初识

    一.web请求流程模拟 python编写的简易服务器应用程序 import socket server=socket.socket() ip_port =('127.0.0.1',8080) serv ...

  4. flex布局大讲解

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

  5. spring Environment

    Environment 环境在容器中是一个抽象的集合,是指应用环境的2个方面: profiles和 properties. profile 配置是一个被命名的,bean定义的逻辑组,这些bean只有在 ...

  6. [matlab] 22.matlab图论实例 最短路问题与最小生成树 (转载)

    最短路问题之 Floyd 某公司在六个城市 c1c1,c2c2,….,c6c6 中有分公司,从 cici 到 cjcj 的直接航程票价记在下述矩阵的 (ii,jj) 位置上. (∞∞表示无直接航路), ...

  7. 【转】Android hdpi ldpi mdpi xhdpi xxhdpi适配详解

    1.了解几个概念(1)分辨率.分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800.720×1280.1080×1920等.720×1280表示此屏幕在宽 ...

  8. ASP.Net：Javascript 通过PageMethods 调用后端WebMethod方法 + 多线程数据处理 示例

    ASP.Net:Javascript 通过PageMethods 调用后端WebMethod方法 + 多线程数据处理 示例 2012年04月27日 16:59:16 奋斗的小壁虎 阅读数:4500   ...

  9. robotframework连接mysql数据库

    1.安装databaselibrary.pymysql 通过cmd命令执行: pip install robotframework-databaselibrary pip install pymysq ...

  10. Python实现机器人聊天

    今天午休的时候,无意之中看了一篇博客,名字叫Python实现机器人,感觉挺有的意思的.于是用其写了一个简单的Python聊天,源码如下所示: # -*- coding: utf- -*- import ...