回顾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. Codeforces1144D(D题）Equalize Them All

    D. Equalize Them All You are given an array aa consisting of nn integers. You can perform the follow ...

  2. python模块知识一 自定义模块、time、datetime时间模块

    第五章 模块 1.自定义模块: 模块分类: 内置模块(标准库)-- python解释器自带的.py文件(模块) 第三方模块(各种大神写的)-- 需要额外下载(并发编程pypi) 自定义模块(自己写的) ...

  3. 微信小程序 「柒留言」 — 实现微信公众号留言功能（限时免费入驻，建议收藏）

    「柒留言」小程序留言助手使用指南(接近原生界面) 前言 从去年 3 月以后新公众号就没得留言功能了,新申请的微信公众号没有留言功能,没有留言就无法跟读者进行互动,写出去的文章得不到反馈,着实感觉有蛮难 ...

  4. chapter02 - 03

    1.分别用cat \tac\nl三个命令查看文件/etc/ssh/sshd_config文件中的内容,并用自己的话总计出这三个文档操作命令的不同之处? 答:cat /etc/ssh/sshd_conf ...

  5. 【iOS】手动抛出异常

    之前没遇到过需要手动抛出异常的时候,这次见到了,记录一下.示例代码如下: /** 如果调用 [[BNRItemStore alloc] init],就提示应该使用 [BNRItemStore shar ...

  6. SpringBoot的yml配置

    Spring Boot的yml配置 #开发配置 spring: data: solr: host: http://localhost:6789/solr/mote mvc: view: # 页面默认前 ...

  7. 基于Docker的GitLab搭建

    今天写一些Docker搭建GitLab,好久没有写博客园了,今天又回来了,为了学习技术? 建议使用Linux内核系统,或者虚拟机,首先安装docker环境(菜鸟教程) 一.下载镜像文件 如果慢的话,可 ...

  8. win10教育版激活错误:在运行 Microsoft Windows 非核心版本的计算机上,运行"slui.exe ...”

    折腾了一天,最终轻松解决,先启用Software Protection服务,在激活(密钥或者工具都行). PS:但是这样还是无法解决Software Protection自动停止的问题,这个可以参考网 ...

  9. spark shuffle写操作三部曲之UnsafeShuffleWriter

    前言 在前两篇文章 spark shuffle的写操作之准备工作 中引出了spark shuffle的三种实现,spark shuffle写操作三部曲之BypassMergeSortShuffleWr ...

  10. Redis分布式锁实战

    什么是分布式锁 在单机部署的情况下,要想保证特定业务在顺序执行,通过JDK提供的synchronized关键字.Semaphore.ReentrantLock,或者我们也可以基于AQS定制化锁.单机部 ...