<div class="gradefather"> hello1
  <div class="father">hello2
    <p class="son">hello4</p>
  </div>
  <p>hello3</p>
  <p>hello5</p>
</div>

一、A,B :任意选择器 A or B

div,p {    #所有div或者p标签
font-size:10px;
color:blue;
}

二、A B:后代选择器,A 标签下的所有B

div p { #div下所有p标签
font-size:20px;
color:green;
}

三、A>B:子选择器,仅仅儿子级别会选中.

gradefather>p {#gradefather的子标签,仅hello3 hello5 会作用
font-size:20px;
color:red;
}
.father>p {#father的子标签,仅hello4 会作用
font-size:20px;
color:red;
}

四、A+B:毗邻选择器,仅仅相邻的同级别(兄弟sibling)第一个会选中.

father+p { #father的第一个邻居,仅仅hello3会作用
font-size:20px;
color:green;
}

注意:
1、块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。块级标签默认占一行,内联标签占内容大小的空间。
2、有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
3、li内可以包含div
4、块级元素与块级元素并列、内联元素与内联元素并列。

CSS快速入门-组合选择器的更多相关文章

  1. CSS快速入门-基本选择器

    1.标签选择器 通过标签进行元素选择. <style> a { font-size:10px; color:red; } </style> 2.* *代表通配符,匹配任意标签, ...

  2. CSS快速入门(四)

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  3. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  4. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

  5. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  6. HTML/CSS快速入门

    Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...

  7. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  8. 02-03 CSS快速入门

    css四种引入方式:test.html: p{ color: gold; font-size: 20px; } title.html: <!DOCTYPE html> <html l ...

  9. web前端之css快速入门

    css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与 ...

随机推荐

  1. Win10命令行激活 & 电脑组装

    系统激活: 1. 管理员身份运行 cmd 2. slmgr.vbs /upk                                                              ...

  2. zabbix agent 3.4 安装指南

    从官方网站www.zabbix.com 下载zabbix agent安装包.目前最新版本是4.0 LTS release. 在需要监控的服务器上安装zabbix agent. 先解压安装包. 配置 c ...

  3. js-dom-动态创建html标签时,name属性的初始化问题

    当我们动态创建可包含Name属性的元素时,不能简单的使用赋值element.name = "..."来添加其Name, 而必须在创建Element时,使用document.crea ...

  4. 华为MSTP负载均衡配置示例

    以下内容摘自由华为公司授权并审核通过,今年元月刚刚出版上市的<华为交换机学习指南>一书:http://item.jd.com/11355972.html,http://product.da ...

  5. Redis缓存雪崩、缓存穿透、热点Key解决方案和分析

    缓存穿透 缓存系统,按照KEY去查询VALUE,当KEY对应的VALUE一定不存在的时候并对KEY并发请求量很大的时候,就会对后端造成很大的压力. (查询一个必然不存在的数据.比如文章表,查询一个不存 ...

  6. mysql数据导入导出与数据表优化

    一.数据导入 mysqlimport -uroot oa d:/aa.txt --fields-terminated-by=, --fields-optionally-enclosed-by= --l ...

  7. SQL语句:查看排名前五的SQL语句耗时情况

    total_worker_time , last_worker_time , max_worker_time , min_worker_time , ) , ( ( CASE statement_en ...

  8. [技术] OIer的C++标准库 : 字符串库

    引入 上次我在博客里介绍了OI中可能用到的STL中的功能, 今天我们接着来发掘C++标准库中能为OI所用的部分. 点击传送至我的上一篇系列博文 众所周知, OI中经常用到字符串相关的处理, 这时善用字 ...

  9. The Rock Game

    Before the cows head home for rest and recreation, Farmer John wantsthem to get some intellectual st ...

  10. Stay true to yourself

    https://zhuanlan.zhihu.com/p/22928614 艾伦·德詹尼斯,1958年1月26日出生于美国路易斯安纳州梅泰里,美国主持人.演员.凭借出众的诙谐幽默的口才和喜剧天赋,活跃 ...