一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 blog 系列,以犒自己. 二.选择器 1.基本选择器 (1)标签选择器 --elementname (2)类别选择器 --.elementname (3)ID选择器 --#elementname (4)通用选择器 --* 2.组合选择器 符号 说明 A > B 子代选择器 A B 后代选择器 A + B…

CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E,选择所有指定元素名称的元素,例如 p,选择所有的 p 元素. 通用选择器 *,选择所有元素,例如: * { box-sizing: border-box; } 类选择器 .class,用一个点号加类名表示,例如 .header,选择所有 class 属性中包含 header 的元素. <div cl…

1. CSS选择器 1.1 选择语法联合使用 CSS selector的另一个强大之处在于:选择语法可以联合使用. html代码: <div id='bottom'> <div class='footer1'> <span class='copyright'>版权</span> <span class='date'>发布日期:2019-11-26</span> </div> <div class='footer2'&…

补充了一些之前遗漏掉的选择器以及一些在 Selectors Level 4 中新定义的选择器. 属性选择器不区分大小写 [attribute="value" i],在 Selectors Level 4 中增强了属性选择器,添加一个 i 标识,让属性大小写不再敏感,例如 a[href$=".pdf" i]: <a href="a.pdf">属性值是小写字母会被选中</a> <a href="b.PDF&qu…

2.4 盒模型 2.4.1 定义 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 2.4.2 盒模型示意图 2.4.3 盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离 如果让你做一个…

CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的相关文章 OverAPI.com – 史上最全开发人员在线速查手册 HTML5 Maker – 在线轻松制作 HTML5 动画效果 SlimerJS – Web开发人员可编写 JS 控制的浏览器 Chance – 功能强大的 JavaScript 随机数生成类库 Debuggex – 超好用的正则表…

一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标识. 只有匹配到具体的对象之后,浏览器才能根据CSS样式声明,决定渲染的效果,并及时呈现在页面中. 1.2.CSS选择类型 标签选择器 ID选择器 类选择器 特殊选择器 1.3.CSS基本语法 二.标签选择器 2.1标签选择器概述 以文档对象类型的元素作为选择器,如p.div,span等. 最常用的…

目录 通用选择器 高级选择器 子选择器 相邻兄弟选择器 属性选择器 通用选择器 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示. 语法: * { property1: value; property2: value; } 示例: ;;} 这行代码可以删除每个元素在浏览器中margin和padding的默认值.不同的浏览器对元素的默认margin和padding可能不同,用通用选择器把所有元素的margin和padding都设置为0方便我们精确地控制元素的margin和pad…

在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X:link X:visited X:hover X:active 伪类 a:link { color: red; }a:visted { color: purple; } 伪类选择器,visted已被访问过的样式,hover鼠标经过的样式,link未被访问的样式.三种伪类选择器常用于链接,但不是说只适用于链接…

css选择器 什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: 这里我只展示几种比较常见的类型, 1. 标签选择器 给同一种标签添加样式,例如: 标签名{ 属性名:属性值: } <style type="text/css"> p{ color: turquoise; } div{ width: 50px; height: 50px; bac…