一、复合选择器（3种）

1、交集复合选择器

特点：由2个选择器组成，其中第一个必须是标签选择器，第二个是类或id选择器。两个选择器之间没有空格（有空格属于层级选择器）

<h3 class="c3">h3标题</h3>

相当于找的是h3标签class属性为c3的元素

2、并集复合选择器

特点：简称集体声明，由多个选择器通过逗号隔开，链接在一起，它主要用于多个不同的标签具有相同的css属性

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>复合选择器</title>

		<style type="text/css">

			h3.c3{

				color: green;

			}

			p#id1{

				color: red;

			}

			h1,h2,h3{

				color: gold;

			}

		</style>

	</head>

	<body>

		<h1>h1标题</h1>

		<h2>h2标题</h2>

		<h3 class="c3">h3标题</h3>

		<p>主卧室</p>

		<p id="id1">jljjhljg啥 是否</p>

	</body>

</html>

3、层级选择器（后代选择器）

特点：嵌套标签

二、盒子模型div

主要有：内容content 高度height宽度width

margin外边距（边框距边框的距离）

margin：4个方向（1个数据）

margin：上下 左右

margin：上 左右 下

margin：上 右 下 左

margin-top：距离上边的外边距

margin-bottom：距离下边的外边距

margin-left：距离左边的外边距

margin-right：距离右边的外边距

padding：内边距（内容距边框的距离）

padding：4个方向（1个数据）

padding：上下 左右

padding：上 左右 下

padding：上 右 下 左

padding-top：距离上边的内边距

padding-bottom：距离下边的内边距

padding-left：距离左边的内边距

padding-right：距离右边的内边距

border：1px solid red设置边框

border-top：设置上边框

border-bottom：设置下边框

border-left：设置左边框

border-right：设置右边框

border-radius：50%矩形改成圆形

CSS复合选择器和div盒子模型的更多相关文章

  1. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  2. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  3. 0013 CSS复合选择器：后代、子代、交集、并集、超链接伪类

    重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...

  4. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  5. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  6. 从div盒子模型谈如何写可维护的css代码（转）

    市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容,细细一看之下才发觉 ...

  7. CSS复合选择器，元素的显示模式，CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  8. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  9. css复合选择器的权重

    选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...

随机推荐

  1. 国内强大的API接口文档写作网站showdoc

    传送门:https://www.showdoc.cc/ 思思今天使用了一下,真是非常方便,瞬间爱上呀,哈哈. 赶紧去试试吧...

  2. php关于文件上传的两个配置项说明

    ; Maximum allowed size for uploaded files.; http://php.net/upload-max-filesizeupload_max_filesize = ...

  3. 云计算和 AWS 概述（一）

    目录 云计算基础 概念 优势 云计算分类 AWS简介 服务概述 AWS 核心服务 AWS 平台服务 AWS开发和操作服务 AWS 数据中心和可用区(AZ) 区域 可用区 区域名 AWS 云适应框架 ( ...

  4. Unity3D 原来Unity比较新的版本支持中文

    注意: Unity 2018.2 以上版本才可以

  5. 到处抄来的SUCTF2019 web wp

    0x01 EasySQL 这是一个考察堆叠注入的题目,但是这道题因为作者的过滤不够完全所以存在非预期解 非预期解 直接构造 *,1 这样构造,最后拼接的查询语句就变成了 select *,1||fla ...

  6. Mybatis使用Spring data Pageable的方法

    引言 可能这个用法是个邪教了...但是简单说这都是历史缘故,貌似是项目最初用JPA后面还是换Mybatis了,我接手时候看着那个写好的Controller层觉得换了怪可惜的,就沿用了.网上找找,提供的 ...

  7. python代码注释 - python基础入门(4)

    在 python改变世界,从hello world开始 中我们已经完成了第一个python程序,代码是有了,关键是好像好不知道写的啥玩意? 一.什么是代码注释 代码注释就是给一段代码加上说明,表明这段 ...

  8. 基于.Net Standard开发的微信服务端开源库

    一直想做一个开源库, 为社区贡献一份力量, 同时提高一下自己 一年来在给公司做一款微信小程序, 于是突发奇想用.Net Standard做一整套微信开发服务端类库 地址: https://gitee. ...

  9. react生成二维码

    图片实例: 简介: QRCode.js 是一个生成二维码的JS库.主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 用法: 1. 在项目中引入qrcode.m ...

  10. List 报错 java.lang.UnsupportedOperationException

    废话不多说,上代码 public class ArrayListTest { @Test public void testList() { List<Long> longList = ne ...