一、复合选择器（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. 【Leetcode_easy】645. Set Mismatch

    problem 645. Set Mismatch 题意: solution1: 统计每个数字出现的次数了,然后再遍历次数数组,如果某个数字出现了两次就是重复数,如果出现了0次,就是缺失数. 注意:如 ...

  2. CentOS安装文件共享samba

    参考:https://jingyan.baidu.com/article/03b2f78cdf811c5ea237aebc.html https://www.linuxidc.com/Linux/20 ...

  3. iOS- Core Foundation对象与OC对象相对转换

    对ARC盲目依赖的同学: 1过度使用block后,无法解决循环引用问题 2遇到底层Core Foundation对象,需要自己手工管理它们的引用计数时,显得一筹莫展 first:对于底层Core Fo ...

  4. LNMP V1.4正式版本安装及新增Let's Encrypt一键安装和其他功能

    军哥的LNMP一键安装包已经有一些年头了,着实给需要在Linux VPS.服务器中安装WEB环境的用户提供不小的帮助,而且每年儿童节都会有较大版本的更新和升级.老左在二月份的时候有体验过LNMP V1 ...

  5. Andrew Ng机器学习课程11之使用machine learning的建议

    Andrew Ng机器学习课程11之使用machine learning的建议 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 2015-9-28 艺少

  6. jira邮箱配置

    系统-邮件-外发邮件

  7. 解决 yolov3: Demo needs OpenCV for webcam images

    默认情况下yolo的Makefile文件有个配置OPENCV=0,你需要将它改成 0 ,然后重新make 编译make 编译就会启用 opencv,此时你需要在你的电脑上安装opencv 才可以 修改 ...

  8. [转载]C# MemoryStream(内存流)

    MemoryStream位于System.IO命名空间,为系统内存提供流式的读写操作.常作为其他流数据交换时的中间对象操作. 1.MemoryStream类封装一个字节数组,在构造实例时可以使用一个字 ...

  9. Mstering QT5 chapter1

    涉及到c++ 14新特性: lambda,autovariables. A basic .pro file generally contains: 1) Qt modules used (core, ...

  10. java源码 -- TreeSet

    这个TreeSet其实和HashSet类似.HashSet底层是通过HashMap实现的,TreeSet其实底层也是通过TreeMap实现的. 简介 TreeSet的作用是保存无重复的数据,不过还对这 ...