<!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. P5038 [SCOI2012]奇怪的游戏

    题目链接 题意分析 首先我们需要求的是统一以后的值\(x\) 并且一般的棋盘操作我们都需要黑白染色 那么对于棋盘格子是偶数的情况的话 答案是存在单调性的 因为如果统一之后 两两搭配还是可以再加一个的 ...

  2. CSS04--对齐、 布局、导航栏

    我们接着上一章,继续学习一些有关对齐.布局.导航栏的内容. 1.水平块对齐:    1.1 margin:把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素    .c ...

  3. mongoengine在python中的使用

    # /usr/bin/python # encoding: utf-8 # Author: masako from mongoengine import * host ='127.0.0.1' por ...

  4. c# 操作excle

    添加引用  Microsoft.Office.Interop.Excel; 添加命名空间 using Excel = Microsoft.Office.Interop.Excel; //创建接口变量- ...

  5. windows 3389 远程

    3389常用命令: 1.查询终端端口 REG query HKLM\SYSTEM\CurrentControlSet\Control\Terminal" "Server\WinSt ...

  6. 使用github oauth 出现 OpenSSL::SSL::SSLError - SSL_connect SYSCALL returned=5 errno=0 state=SSLv2/v3 解决

    A top level initializer is highly recommended to use: conf/initializer/tls_settings.rb OpenSSL::SSL: ...

  7. Spring框架的设计理念

    它这种设计策略完全类似于Java实现OOP的设计理念,当然Java本身的设计要比Spring复杂太多太多,但是它们都是构建一个数据结构,然后根据这个数据结构设计它的生存环境,并让它在这个环境中按照一定 ...

  8. *2.3.3-加入monitor

    验证平台必须监测DUT的行为,只有知道DUT的输入输出信号变化之后,才能根据这些信号变化来判定DUT的行为是否正确. 验证平台中实现监测DUT行为的组件是monitor.driver负责把transa ...

  9. [笔记] Python基础---列表

    1.定义列表 列表由数据构成的有限序列,即按照一定的线性顺序排列,排列而成的数据项的集合. 2.创建列表 使用‘[ ]’括起来就已经创建了一个列表,例: my_first_list = [] #空列表 ...

  10. Vue组件库

    滴滴cube-ui https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start 有赞开源Vant(适合做商城) https://tech.youza ...