一、复合选择器（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】771. Jewels and Stones

    problem 771. Jewels and Stones solution1: class Solution { public: int numJewelsInStones(string J, s ...

  2. Docker安装LogonTracer

    LogonTracer LogonTracer:是一款用于可视化分析Windows安全事件日志寻找恶意登录的工具.它会将登录相关事件中找到的主机名(或IP地址)和帐户名称关联起来,并将其以图形化的方式 ...

  3. KMeans聚类

    常用的聚类方法: ①分裂方法: K-Means算法(K-平均).K-MEDOIDS算法(K-中心点).CLARANS算法(基于选择的算法) ②层次分析方法: BIRCH算法(平衡迭代规约和聚类).CU ...

  4. js中实现base64加密、解密

    //base64加密 解密 /* //1.加密 var result = Base.encode('125中文'); //--> "MTI15Lit5paH" //2.解密 ...

  5. Timsort

    https://archive.codeplex.com/?p=timsort4net#117964 download archive https://codeplexarchive.blob.cor ...

  6. 《Mysql - 优化器是如何选择索引的？》

    一:概念 - 在 索引建立之后,一条语句可能会命中多个索引,这时,索引的选择,就会交由 优化器 来选择合适的索引. - 优化器选择索引的目的,是找到一个最优的执行方案,并用最小的代价去执行语句. 二: ...

  7. c++语法笔记（中）

    继承与派生 继承面向对象程序设计4个主要特征:抽象,封装,继承,多态性c++通过继承实现可重用性.有时两个类的内容基本相同或有一部分相同,这时可以利用原来声明的类作为基础,再加上新的内容即可,减少了工 ...

  8. 5-9 c语言之【初识win32编程】

    ---恢复内容开始--- 今天学习了win32的相关知识,首先win32是指是指可以在32位或以上Windows系统中运行的程序,我学习的主要利用c/c++语言编写的win32程序, 首先在win32 ...

  9. Geometers Anonymous Club CodeForces - 1195F (闵可夫斯基和)

    大意: 给定$n$个凸多边形, $q$个询问, 求$[l,r]$内闵可夫斯基区间和的顶点数. 要用到一个结论, 闵可夫斯基和凸包上的点等于向量种类数. #include <iostream> ...

  10. Http 与 Https区别

    传统Http协议弊端 传统Http协议弊端是明文的,如果别人采用抓包分析可以获取到明文数据. 什么是Https协议 HTTPS(Hyper Text Transfer Protocol over Se ...