<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. ubuntu下给raspy pi2 编译qt5库

    交叉编译时,通常要准备mkspec, 参考: http://wiki.qt.io/Building_Qt_for_Embedded_Linux mkspec包含两个文件: qmake.conf- Th ...

  2. 万恶的浏览器缓存 Vuex state里面的成员改名后浏览器不会马上更新

    今天在用Vuex的时候,在state里面加了个名叫rootUrl的属性 但是怎么都取不到值,重新启动程序,ctrl+f5浏览器刷新都不行,纠结了大半上午,于是用console.log(store.ge ...

  3. postgresql排序分页时数据重复问题

    当同时排序又分页时,如果排序的字段X不是唯一字段,当多个记录的X字段有同一个值时顺序是随机的. 这个有可能造成分页时数据重复的问题.某一页又把上一页的数据查出来了,其实数据库只有一条记录. 解决办法: ...

  4. trait代码复用

    在面对对象编程中我们经常通过继承来解决部分代码多次出现的问题 php支持单继承,有时候由于不相关联的两个类的方法相同我们需要进行继承操作, trait可以实现不继承的情况下复用代码 trait的使用类 ...

  5. 【11】python 递归,深度优先搜索与广度优先搜索算法模拟实现

    一.递归原理小案例分析 (1)# 概述 递归:即一个函数调用了自身,即实现了递归 凡是循环能做到的事,递归一般都能做到! (2)# 写递归的过程 1.写出临界条件 2.找出这一次和上一次关系 3.假设 ...

  6. Python接口自动化--URL参数的编码和解码 6

    # _*_ coding:utf-8 _*_ #python2 import urllib #有时,需要从上一个请求的url获取参数,传到下一个请求中,中文会显示为编码的形式,这时候就需要进行解码 u ...

  7. Nowcoder 提高组练习赛-R7

    Nowcoder 提高组练习赛-R7 https://www.nowcoder.com/acm/contest/179#question 中间空了两场,因为实在是太难了... 第五场的第二题好像还比较 ...

  8. 1083. [SCOI2005]繁忙的都市【最小生成树】

    Description 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道 路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路 ...

  9. Kafka学习之路 (四)Kafka的安装

    一.下载 下载地址: http://kafka.apache.org/downloads.html http://mirrors.hust.edu.cn/apache/ 二.安装前提(zookeepe ...

  10. Odoo作为App后端时如何调试App

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9307340.html  一:Odoo可以作为app后台+后台管理系统使用 Odoo作为一个可供二次开发的框架, ...