回顾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. Git更改提交

    提交记录我们的工作历史记录,提交自身是一成不变的.Git提供了几个工具和命令,抓门用来帮助修改完善版本库中的提交. 实际工作中存在很多情况需要我们去修改或返工某个提交或者整个提交序列: 1,可以在某个 ...

  2. 2019年7月19日 - LeetCode0001

    https://leetcode-cn.com/problems/two-sum/ 我的方法: class Solution { public int[] twoSum(int[] nums, int ...

  3. Android拨打电话权限总结

    android在6.0和6.0以上拨打电话的权限声明 /** * 打电话 * * @param phoneNumber */ protected void startCallPhone(String ...

  4. Java 常见面试题整理

    操作系统 说一下线程和进程,它们的区别 同步和异步的区别 阻塞和非阻塞的区别 操作系统中死锁的四个必要条件 mmap和普通文件读写的区别,mmap的注意点 CPU密集型和IO密集型的区别 Linux ...

  5. storm trident 的介绍与使用

    一.trident 的介绍 trident 的英文意思是三叉戟,在这里我的理解是因为之前我们通过之前的学习topology spout bolt 去处理数据是没有问题的,但trident 的对spou ...

  6. Java IO 为什么我们需要缓冲区

    在执行IO操作我们通常会设置一个字节数组作为缓冲区用来写/读数据,一般情况下一个合理大小的缓冲区是有利于提升性能的,但是有一个问题一直困扰着我,为什么缓冲区可以提升IO操作的性能? 经查阅资料之后,总 ...

  7. typescript 公共，私有与受保护的修饰符

    public理解 当你在程序中没有指明修饰符时,默认为public,也就是在类内类外都可以访问,我们以下面的例子来解释. class Person{ name:string sex:string ag ...

  8. django中通过文件和Ajax来上传文件

    一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...

  9. TestNG中group的用法

    TestNG中的组可以从多个类中筛选组属性相同的方法执行. 比如有两个类A和B,A中有1个方法a属于组1,B中有1个方法b也属于组1,那么我们可以通过配置TestNG文件实现把这两个类中都属于1组的方 ...

  10. linuk相关命令

    1,Linux的每个文件一般都有三个权限 r--读,w--写,x--执行,其分别对应的数值为4,2,1. 输入ll可以查看到文件的权限. 2,给目录或文件授权 chmod 777 目录名 chmod ...