一、复合选择器（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. mycat 实现读写分离

    mycat 实现读写分离 配置mysql实现主从复制 安装jdk 安装mycat实现读写分离 tar zxf Mycat-server-1.6-RELEASE-20161028204710-sangn ...

  2. CenOS 7 java链接redis数据库

    完整代码 public class App { public static void main(String[] args) { System.out.println("Hello Worl ...

  3. rebbitMQ的实现原理

    引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松地解决这些问题.消息服务擅 ...

  4. Neo4j常用的查询

    一.添加操作 1. 添加节点: create (x:学生{studentId:'1001',age:20} 2. 添加关系: 对现有的节点添加关系 match (x:学生{studentId:1001 ...

  5. MySQL忘记密码解决

    1.设置管理员root密码为123 开启MySQL服务后 PS C:\WINDOWS\system32> mysqladmin -uroot -p password "123" ...

  6. 1223: 输出汉诺塔问题的盘子移动步骤（Java）

    一.题目 http://acm.wust.edu.cn/problem.php?id=1223&soj=0 二.代码 import java.util.*; public class Main ...

  7. TZOJ2882: 美食节之感恩父母

    #include<stdio.h> int main() { ],b[],i,j,max,m,t1,t2,t3; while(scanf("%d",&m),m) ...

  8. Nginx学习笔记（一）：Nginx 进程模型 / 事件处理模型

    Nginx 进程模型 ​​​​ 多进程模型 进程间相互独立,无需加锁,且互不影响: 一个进程退出了不影响其他的进程运行,降低风险: 当请求到来,多个 worker 通过竞争 accrpt_mutex ...

  9. Jfinal初次尝试及Jetty使用相关问题

    Jetty介绍 Jetty官网:http://www.eclipse.org/jetty/ 参考:Jetty使用教程(一)--开始使用Jetty 1. 使用 参考上面文档,但是有些更新: echo $ ...

  10. Codeforces 1249 F. Maximum Weight Subset

    传送门 设 $f[x][i]$ 表示 $x$ 的子树中,离 $x$ 最近的选择的节点距离为 $i$ 的合法方案的最大价值 设 $val[x]$ 表示节点 $x$ 的价值,首先有 $f[x][0]=va ...