<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        /*相邻兄弟选择器*/

        /*h1 + p{

            color: red;

        }*/

        /*通用兄弟选择器*/

        h1 ~ p{

            color: red;

        }

    </style>

    <title>相邻兄弟选择器,通用兄弟选择器</title>

</head>

<body>

<!--相邻兄弟选择器   相邻的兄弟，必须严格相邻，不允许出现其他元素间隔-->

<!--通过兄弟选择器   所有的同级兄弟  不要求严格相邻 -->

<h1>好好学习</h1>

<span>ccy</span>

<p>好好学习1</p>

<p>好好学习2</p>

<p>好好学习3</p>

<p>好好学习4</p>

<p>好好学习5</p>

</body>

</html>

　　

04.CSS选择器-->相邻、通用兄弟选择器的更多相关文章

  1. css 通用兄弟选择器( ~ )

    stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...

  2. css兄弟选择器，+ ~选择器的区别

     壹 ❀ 引 实习生在写搜索框下拉提示时,遇到了不知道怎么解决的问题,所以来问我.效果不难,鼠标选中输入框(focus)时,展示搜索关键字相关提示,看了眼dom结构是这样的: 在她的理解里面,选中父元 ...

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

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

  4. CSS选择器之兄弟选择器（~和+）

    今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的区别,虽然我知道他们都是兄弟选择器. 后来网上查了下,也许是我查找的方式不对,没有找到我 ...

  5. Day5 CSS基本样式和C3选择器

    Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色            background-color:transparent(默认值,透明); 颜色的取值:            ...

  6. CSS选择器有哪些？选择器的优先级如何排序？

    CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器. 用法如下: 选择器   e.g. 说明 id选择器 #id #header 选择id="header ...

  7. 第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  8. 兄弟选择器 E + F

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

  9. HTML连载20-并集选择器&兄弟选择器

    一.并集选择器 1.作用:给所有的选择器选中的标签设置属性. 2.格式: 选择器1,选择器2{ 属性:值: } 3.例如: .abc1,#abc2{ color:red; } .......省略代码. ...

随机推荐

  1. 浅谈mongodb与Python的交互

    1. mongdb和python交互的模块 pymongo 提供了mongdb和python交互的所有方法 安装方式: pip install pymongo 2. 使用pymongo 导入pymon ...

  2. python之守护进程

    主进程创建子进程,然后将该进程设置成守护自己的进程,守护进程就好比崇祯皇帝身边的老太监,崇祯皇帝已死老太监就跟着殉葬了. 关于守护进程需要强调两点: 其一:守护进程会在主进程代码执行结束后就终止 其二 ...

  3. BZOJ3168. [HEOI2013]钙铁锌硒维生素（线性代数＋二分图匹配）

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3168 题解 首先,我们需要求出对于任意的 \(i, j(1 \leq i, j \leq ...

  4. [转] HBase异常：hbase-default.xml file seems to be for an old version of HBase

    [From] https://blog.yoodb.com/yoodb/article/detail/157 使用HBase Java Client连接HBase服务端创建Configuration对 ...

  5. python附录-re.py模块源码（含re官方文档链接）

    re模块 python官方文档链接:https://docs.python.org/zh-cn/3/library/re.html re模块源码 r"""Support ...

  6. centos 7修改系统支持中文编码

    2019-03-14 查看系统现支持编码 }[root@web dc2-user]#locale LANG=en_US.UTF- LC_CTYPE="en_US.UTF-8" LC ...

  7. 【编程技术-Shell】AWK使用大全

    1.  AWK中输出特殊字符 输出单引号 涉及到转义字符,但是在使用普通的方法进行转义时,会遇到下面的问题 正确的方法:'\'',使用单引号将转义字符括起来,然后后面加上单引号 输出其他特殊字符 输出 ...

  8. JS DATE对象详解

    1.建立时间对象:可获取年,月,日,星期,时,分,秒 var d = new Date(); console.log(d.getFullYear()+'年'+d.getMonth()+'月'+d.ge ...

  9. python-Unix套接字

    #!/usr/bin/python #coding=utf-8 #server import socket import sys import os server_address = './test' ...

  10. HDU 1102 Constructing Roads(kruskal)

    Constructing Roads There are N villages, which are numbered from 1 to N, and you should build some r ...