CSS快速入门-组合选择器
<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快速入门-组合选择器的更多相关文章
- CSS快速入门-基本选择器
1.标签选择器 通过标签进行元素选择. <style> a { font-size:10px; color:red; } </style> 2.* *代表通配符,匹配任意标签, ...
- CSS快速入门(四)
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- 02-03 CSS快速入门
css四种引入方式:test.html: p{ color: gold; font-size: 20px; } title.html: <!DOCTYPE html> <html l ...
- web前端之css快速入门
css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与 ...
随机推荐
- 初识java内存区域
目录: 1.运行时数据区域 2.对象的创建 3.对象的内存布局 4.对象的访问定位 一.运行时数据区域 基本的java虚拟机运行时数据区如下图: 下面我们就来逐个认识这几个运行时的数据区域 1.程序计 ...
- DELL MD3200i存储控制器解锁方法
DELL MD3200i存储控制器解锁方法 现有一台DELL MD3200i存储,因种种原因导致控制器被锁定,这里是刚出厂的一台存储,出现这个问题让我们都很困惑,只能怀疑DELL公司的问题. 这台存储 ...
- 使用Vagrant和VirtualBox一步步地创建一个Base Box
box集合 http://www.vagrantbox.es/ Vagrant和VirtualBox软件的安装步骤省略,去官网下载最新的版本然后下一步下一步地安装就行了,和正常的安装软件没有什么区别 ...
- NoSQL数据库的认识
SQL数据库和NoSQL数据库介绍 什么是SQL数据库? 关系型数据库是依据关系模型来创建的数据库.而所谓的关系模型就是“一对一.一对多.多对多”等关系模型,这是一种二维表格模型,因此一个关系型数据库 ...
- vc获取当前进程CPU使用率
double GetCPUUserRate() { HANDLE hProcess=::GetCurrentProcess(); static DWORD s_dwTickCountOld = 0; ...
- 当DATABASE进入了suspect模式以后
一个VM的错误就造成了sql2012的脱序.很多一般看不到的模式陆续登场 诸如 recovery pending, suspect, EMERGENCY. 以下脚本可以帮助恢复,如果文件没有损坏的话. ...
- SDN 第二次上机作业
SDN第二次上机作业 1.控制器floodlight所示可视化图形拓扑的截图,及主机拓扑连通性检测截图 拓扑 连通性 2.利用字符界面下发流表,使得'h1'和'h2' ping 不通 流表截图 连通性 ...
- vue2.0路由切换后页面滚动位置不变BUG
最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. 方法一: 监听路由 // app.vue export default { watch:{ '$route':func ...
- BZOJ 1208 宠物收养所 set+二分
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1208 题目大意: 最近,阿Q开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠 ...
- python第三十九课——面向对象(二)之设计类
1.设计类class 车: #属性 颜色 = red 品牌 = "BMW" 车牌 = "沪A88888" #函数 行驶(): 停止(): 2.实例化车对象 ca ...