一、复合选择器（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. 树莓派连接显示器后设置ssh服务开机自动开启

    进入命令行,然后执行: cd /boot sudo touch ssh sudo restart -r now 然后就重新启动了,重启好了会有依据提示. 然后可以输入ssh localhost进行一下 ...

  2. Cas（01）——简介

    Cas的全称是Centeral Authentication Service,是对单点登录SSO(Single Sign On)的一种实现.其由Cas Server和Cas Client两部分组成,C ...

  3. EasyNetQ使用(八)【对延迟消息插件的支持,自动订阅者】

    RabbitMQ延迟消息插件仍然在实验阶段.你使用这个功能要自担风险. RabbitMQ延迟消息插件为RabbitMQ增加了新的交换机类型,允许延时消息投递. EasyNetQ为交换机通过定义一种新的 ...

  4. Docker镜像仓库Harbor搭建

    园子里面已经有人写过了.也写得很好,我这里只记录下我遇到的问题 Harbor 依赖: 1:docker 2:docker-compose 怎么安装就不说了. 然后是安装Harbor github:ht ...

  5. 安装新版redis4.0.6

    看看新版本有那些特性提升,测试用!先安装 网址:https://redis.io/download 获取:wget http://download.redis.io/releases/redis-4. ...

  6. ubuntu的sudo免密

    ubuntu的sudo免密与centos大同小异,都是在/etc/sudoers中添加用户信息,添加的内容也一样,只是位置不一样. centos的位置如下: 而ubuntu的位置如下: 除此之外,两行 ...

  7. qt qml中的Tabview使用心得

    彩云之南的天是如此湛蓝,天上落下的水是如此清澈. 最近在qt5.5下使用TabView,如下. 1) currentIndex变量很好用,其对应当前被显示的tab,其值变化时还会触发onCurrent ...

  8. java输入输出 -- Java NIO之套接字通道

    一.简介 前面一篇文章讲了文件通道,本文继续来说说另一种类型的通道 – 套接字通道.在展开说明之前,咱们先来聊聊套接字的由来.套接字即 socket,最早由伯克利大学的研究人员开发,所以经常被称为Be ...

  9. golang之面向对象编程

    1.Golang语言面向对象编程说明 1)Golang也支持面向对象编程(OOP),但是和传统的面向对象编程有区别,并不是纯粹的面向对象语言.所以我们说Golang支持面向对象编程特性是比较准确的. ...

  10. 机器学习笔记--Hoeffding霍夫丁不等式

    Hoeffding霍夫丁不等式 在<>第八章"集成学习"部分, 考虑二分类问题\(y \in \{-1, +1\}\) 和真实函数\(f\), 假定基分类器的错误率为\ ...