回顾CSS选择符，学习接入样式的更多方式。

一、选择符

　　1. 种类

　　　　① 类型选择符：直接的HTML标签名，例如： body、p、div 等；

　　　　② 后代选择符：空格，例如： div p 选择div中的所有p元素后代；

　　　　③ ID选择符：形如“#id”，例如 #introduction 选择id为introduction的元素（注：理论上说id必须要唯一定义，但浏览器为了向下兼容不好好写HTML代码的人，会将所有使用此ID的元素都添加上该样式）；

　　　　④ 类选择符：形如“.class”，例如 .latest 选择所有class为latest的元素；

　　　　⑤ 子选择符：形如“>”，例如 div > p 选择div中的第一个p元素直接后代；

　　　　⑥ 相邻同辈选择符：形如“+”，例如 h2 + p 选择位于h2后面，且与h2有相同的父元素的第一个p元素；

　　　　⑦ 一般同辈选择符：形如“~”，例如 h2 ~ p 选择位于h2后面，且与h2有相同的父元素的所有p元素；

　　　　⑧ 通用选择符：“*”，表示选择全部元素（类比其他例如SQL语言的通配符）；

　　　　⑨ 属性选择符：形如“input[type="email"]”，例如 abbr[title] 选择所有拥有title属性的abbr元素（注：其中[]中填入的属性值可以用类似RegExp的语法匹配，例如： a[href^="http:"] 表示选择所有href开头为http:的a元素）；

　　　　⑩ 伪元素：带有双冒号“::”的选择器，例如 p::first-letter 选择p元素中的第一个字符（谨慎地使用伪元素，因为如果用它们插入一些有实质性交互意义的内容时，如果CSS加载不正确就会产生很大的麻烦，而且屏幕阅读器没有统一方法解释它们）；

　　　　⑩① 伪类：带有单冒号“:”的选择器，例如 div:hover 表示当鼠标在div上移动时给div应用上这个样式（同样，由于键盘、移动端等不一定真的有悬停状态，请也不要将有实质性交互意义的内容添加到:hover的元素中）。

二、层叠与继承

　　1. “层叠”样式表

　　　　之所以CSS（Cascading Style Sheet）要叫CSS，是因为它具有层叠的特点。这似乎是废话，但CSS中层叠的特性保证了它在代码多次复用时正常地执行。所谓的层叠，实际上就是根据代码的前后顺序、优先级等因素来最终确定哪些样式被覆盖掉，哪些被应用上。

　　2. 继承

　　　　有些属性，会被应用它们的元素后代继承，例如文本颜色、字体大小等。继承使CSS代码被复用，而层叠保证了复用状态下样式能按照期望正常显示。

　　3. 优先级

　　　　简单地说，优先级分成几个等级，相同优先级的选择器相连会使优先级更高，但在CSS内部的实现中，低优先级的选择器无论有多少个连在一起，最终的组成的选择器优先级也不会比一个高优先级的选择器高。

　　　　① 最高优先级：内联样式；

　　　　② 排名第二：ID选择器；

　　　　③ 排名第三：class选择器、伪类选择器以及属性选择器（三者相等）；

　　　　④ 排名第四：类型选择器、伪元素选择器（二者相等）；

　　　　⑤ 排名第五：继承父元素而得到的样式。

三、应用样式，提升性能

　　1. 应用样式的方法：① 在 <style></style> 中定义；② 使用 <link href="xxx.css" /> 标签从外部引入；③ @import 'xxx.css' 从外部引入。

　　2. 提升性能

　　　　要想减少页面的“上屏速度”，一是从网络上优化，二是从减小文件大小上做文章，三是从页面自身加载顺序上想办法。因此：

　　　　① 减少HTTP请求

　　　　　　我们知道，每一个文件的请求都会单独发送HTTP请求，然后浏览器花一定的时间进行下载，并渲染页面。因此，我们要尽量少地使用 @import ，并将CSS文件数量尽可能减少至一两个；

　　　　② 压缩文件

　　　　　　写过CSS的都知道，CSS的很多属性和值都是重复的，因此它压缩的比率很高，一个CSS文件压缩后会减少70%~80%的大小。这显然可以减少带宽的占用，很多Web服务器会在浏览器的支持下启用自动压缩线上资源。同时，要让服务器帮你设置较长的CSS文件缓存时间。压缩文件和合理缓存内容是提升网站性能最重要的两件事；

　　　　③ 老生常谈，不让JavaScript脚本加载阻塞页面渲染

　　　　　　初学时常常看到网络上大家的代码中， <script> 标签都会放在HTML中body元素的末尾，很多人只是说这样可以提升页面加载速度却没有讲清楚为什么。JavaScript的下载与执行过程是比较缓慢的，而浏览器在解释HTML的过程中，加入将脚本放在了位于首部的 <head> 标签中，就会先忽视下面body部分的渲染，在白屏状态下先下载执行JavaScript，如此用户的体验极差。因此古典的做法是将 <script> 标签往后摆。HTML5中 <script> 标签加上了两个属性：async和defer，它们的作用分别是1. 使脚本异步加载，完毕时阻塞HTML解析并执行脚本2.使脚本异步加载，等HTML加载完毕后执行脚本。但这两个属性是HTML5的属性，意味着IE10以及更早不会支持。

总结：我们认识了常用的CSS选择符和一些新颖的便于操作的选择符，另外梳理了不同选择符之间的优先级关系，最后探讨了该如何提升网站页面加载的速度。

林大妈的CSS知识清单（一）添加样式的更多相关文章

  1. 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）

    盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...

  2. 从零开始学习html（六）开始学习CSS，为网页添加样式

    一.认识CSS样式 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  3. 林大妈的JavaScript基础知识（一）：JavaScript简史

    前言:做一名Web设计师是一件令人兴奋的事.在Web技术中,JavaScript是一个经历从被人误解到万众瞩目的巨大转变,在历史的冲击中被留存下来的个体.因为JavaScript的引导,Web开发也从 ...

  4. 林大妈的JavaScript基础知识（三）：JavaScript编程（3）原型

    在一般的编程语言中,我们使用继承来复用代码,做成良好的数据结构.而在JavaScript中,我们使用原型来实现以上的需求.由于JavaScript专注于对象而摒弃了类,我们要明白原型和继承的确是有差异 ...

  5. 你该学点HTML/CSS知识的9大理由

    每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...

  6. css知识总结

    ---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

  7. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  8. 【springboot】给你一份Spring Boot知识清单

    目录: 一.抛砖引玉:探索Spring IoC容器 1.1.Spring IoC容器 1.2.Spring容器扩展机制 二.夯实基础:JavaConfig与常见Annotation 2.1.JavaC ...

  9. CSS知识回顾--读《CSS 那些事儿》笔记

    由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...

随机推荐

  1. tar 命令详解(持续更新)

    可以用man tar查看tar命令使用的权威解释 Main operation mode: -c: 建立压缩档案 -r:向压缩归档文件末尾追加文件 -t:查看内容 -u:更新原压缩包中的文件 -x:解 ...

  2. 获取Oracle中表的结构

    首先cmd登录Oracle:sqlplus user/password@host/db_name 然后输入DESC table_name 可以先按住Alt,再选中字段名(块选中快捷方式)

  3. Liunx环境下配置matplotlib库使用中文绘图

    最近在使用matplotlib库的过程中需要用到中文绘图,在网上找了好多种方法,最终用一种方法解决了,在此记录. 首先Linux是有自己的中文字体的,叫做"Droid Sans Fallba ...

  4. javaweb入门---web服务器与HTTP协议基础

    上文web基础简介了web到底是什么,以及身为Java开发人员需要掌握的地方.本文将解答web服务器是什么,怎么使用?还有关于http协议的基础知识. web服务器 web服务器的大概念很广泛,但是通 ...

  5. Java连接MySQL8.0以上版本数据库方式

    MySQL 8.0 开始数据库相比常用的 5.X 版本发生了比较大的变化,我们在连接数据库的过程中许多地方也要发生一些变化. 总结一下,想要利用 mysql-connector-java 与 MySQ ...

  6. Restful API 中的错误处理

    简介 随着移动开发和前端开发的崛起,越来越多的 Web 后端应用都倾向于实现 Restful API. Restful API 是一个简单易用的前后端分离方案,它只需要对客户端请求进行处理,然后返回结 ...

  7. CTF杂项题解题思路

    下载压缩包解压 如果是图片就先查看图片信息 没有有用信息查看图片看是否是一个图片 如果不是图片就将文件进行还原 从还原文件中查找有用信息 例:这是一张单纯的图片 http://123.206.87.2 ...

  8. 内容汇总（c语言）

    一,内容 常量(整型,浮点型,字符型,字符串型,符号常量) 变量(基本类型:整形,浮点型,字符型,枚举型:构造类型:数组,结构体,共用体:另外还有指针类型和NULL) 顺序结构 分支结构 循环结构 当 ...

  9. Something wrong with EnCase v8 index search results

    My friend told me that she installed EnCase v8.05 on her workstation which OS version is Win 10. She ...

  10. Web前端开发——Ionic 3.0【爱创课堂专业前端培训】

    前端开发——Ionic 3.0 一.Ionic 移动端有三种开发方向 源生APP开发, 移动端web开发 混合开发(介于以上两者之间的) 类微信小程序 reactNative,用react语法,开发a ...