<!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. python要点记录

    1.字典:当存储的key数目在几万到几十万之间效率最高.

  2. CUDA安装

    1.CUDA是什么? CUDA(Compute Unified Device Architecture),显卡厂商NVidia推出的运算平台. 随着显卡的发展,GPU越来越强大,而且GPU为显示图像做 ...

  3. JQ 文件上传

    var formData = new FormData(); var name = $("input").val(); formData.append("file&quo ...

  4. vue项目微信回退按钮处理

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. React之表单

    第一部分:表单基础 在React中,修改表单的唯一途径是使用setState方法.举例如下: class NameForm extends React.Component { constructor( ...

  6. jQuery多库共存问题解决方法

    一.问题概述: 1.随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时 ...

  7. ubuntu设置root权限默认密码

    1.默认root密码是随机的,即每次开机都有一个新的root密码.我们可以在终端输入命令 sudo passwd,然后输入当前用户的密码2.终端会提示我们输入新的密码并确认,此时的密码就是root新密 ...

  8. LINUX 查找替换命令 总结

    find /var/ -name "*.php" > /home/tmp 在/var/目录下查找 所有以.php后缀结尾的文件  结果很多,就 > 输出结果到/home ...

  9. c++ 网络编程（十一） LINUX下 初步制作基于HTTP的WEB服务器

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9663028.html HTTP概要 理解Web服务器端: 编写HTTP(超文本传输协议)服务器 ...

  10. 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）

    其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...