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. C# 枚举转列表

    using System; using System.Collections.Generic; using System.ComponentModel; namespace Common.Utils ...

  2. c/c++ static关键字

    static关键字 1,static 成员变量 static 成员变量不随着对象的创建而开辟内存空间.也就是说,不管从哪个对象去看static成员变量,都是一样的. 2, static 成员方法 st ...

  3. c/c++拷贝构造函数和关键字explicit

    c/c++拷贝构造函数和关键字explicit 关键字explicit 修饰构造方法的关键字,加上了,就告诉编译器,不可以隐式初始化对象:不加就可以隐式初始化对象: 下面的代码是可以正常编译执行的,但 ...

  4. 设置SSH免密码登录

    1.cd .ssh 2.执行下面的命令,三次回车. ssh-keygen -t rsa cat id_rsa.pub >> authorized_keys 3.发送公钥 scp .ssh/ ...

  5. March 08th, 2018 Week 10th Thursday

    Easy come, easy go. 易得则易失. Easy come, easy go, I finally undestand the phrase through somewhat hard ...

  6. vue调试工具的安装

    开发避免不了的就是调试工具,因为vue是进行数据驱动的,单从chrome里面进行element查看,查不到什么鸟东西,必须要进行对数据动向进行关查 首先是下载这个工具,github下载地址:https ...

  7. nginx相关命令

    https://www.cnblogs.com/zdz8207/p/CentOS-nginx-yum.html

  8. 当web应用包含了websocket长连接，如何在web应用前加一层nginx转发

    1 通过在web应用的前面加一层nginx ,可以实现一台主机部署多个应用,每个应用都可以用不同的域名去访问,并且端口都是80 2 nignx 转发websocket长连接 1 每个web应用,他们运 ...

  9. C++编写 动态链接库dll 和 调用dll

    参考:https://jingyan.baidu.com/article/ff42efa92c49cfc19e2202fd.html 和htps://jingyan.baidu.com/article ...

  10. 【转】svn冲突问题详解 SVN版本冲突解决详解

    (摘自西西软件园,原文链接http://www.cr173.com/html/46224_1.html) 解决版本冲突的命令.在冲突解决之后,需要使用svnresolved来告诉subversion冲 ...