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 中,是为了解决内容与 ...
随机推荐
- Android Studio之could not reserve enough space for object heap报错
在用AndroidStudio时出现这样的错误: 搞了半天终于找到了解决办法,但是很麻烦.就是每次创建工程后,在gradle.properties文件中加入如下代码: org.gradle.jvma ...
- 安装SQL sever2008时显示重新启动计算机规则失败,应该怎么解决?
1.删除注册表:在HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager中找到 PendingFileRenameOpe ...
- Django之MVC与MTV
MVC框架 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写 模型 - 视图 - 控制器是一种通常用于开发用户界面的 ...
- Linux运维之--LVS、Nginx、HAproxy有什么区别?
LVS: 是基于四层的转发 HAproxy: 是基于四层和七层的转发,是专业的代理服务器 Nginx: 是WEB服务器,缓存服务器,又是反向代理服务器,可以做七层的转发 区别: LVS由于是基于四层的 ...
- 乘风破浪:LeetCode真题_041_First Missing Positive
乘风破浪:LeetCode真题_041_First Missing Positive 一.前言 这次的题目之所以说是难,其实还是在于对于某些空间和时间的限制. 二.First Missing Posi ...
- October 14th 2017 Week 41st Saturday
I was well beaten myself, and I am beffer for it. 我自己也被打败过,但我因此变得更好. For most of us, the life road c ...
- python3: 迭代器与生成器(1)
1. 手动遍历迭代器 你想遍历一个可迭代对象中的所有元素,但是却不想使用for循环. >>> items = [1, 2, 3] >>> # Get the ite ...
- 2018.08.31 19:41 自学go语言
有的人是从最基础的开始学,而我却是从最简单开始学,学着调试,学着编程,其实我也是编程小白,好多的不懂,我不明白很多都可以用云完成了,为什么还要继续自己编程,不明白,但是有需求吧,有需求是件好事情,说明 ...
- cJSON 使用详解
由于c语言中,没有直接的字典,字符串数组等数据结构,所以要借助结构体定义,处理json.如果有对应的数据结构就方便一些, 如python中用json.loads(json)就把json字符串转变为内建 ...
- 1.数据结构&算法的引言+时间复杂度
一.什么是计算机科学? 首先明确的一点就是计算机科学不仅仅是对计算机的研究,虽然计算机在科学发展的过程中发挥了重大的作用,但是它只是一个工具,一个没有灵魂的工具而已.所谓的计算机科学实际上是对问题.解 ...