回顾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. 个人永久性免费-Excel催化剂功能第37波-把Sqlserver的强大分析函数拿到Excel中用

    本人一直钟情于使用Sqlserver数据库的一大原因是其提供了非常好用.高效的数据分析函数(窗口函数),可以在做数据清洗和数据分析场合等多个场景使用.只需简单的一个函数即可做出常规SQL语句很难以实现 ...

  2. Scrapy爬虫框架与常用命令

    07.08自我总结 一.Scrapy爬虫框架 大体框架 2个桥梁 二.常用命令 全局命令 startproject 语法:scrapy startproject <project_name> ...

  3. [leetcode] #279 Perfect Squares (medium)

    原题链接 题意: 给一个非整数,算出其最少可以由几个完全平方数组成(1,4,9,16……) 思路: 可以得到一个状态转移方程  dp[i] = min(dp[i], dp[i - j * j] + ) ...

  4. sql nvarchar类型和varchar类型存储中文字符长度

    今天遇到了,随手记录一下.   sql server 存储数据里面 NVARCHAR 记录中文的时候是 一个中文对应一个字符串长度,记录英文也是一个字母一个长度 标点符号也是一样.          ...

  5. iframe插入视频自动播放代码

    <iframe marginwidth=0 marginheight=0 src='http://www.wsview.com/yzplayerAction!play2.action?autoP ...

  6. [mysql终极优化]之主从复制与读写分离详细设置教程

    读写分离与主从复制是提升mysql性能的重要及必要手段,大中型管理系统或网站必用之. 一.什么是读写分离与主从复制 先看图 如上图所示,当web server1/2/3要写入数据时,则向mysql d ...

  7. 负载分配—DNS的域名解析

    DNS(Domain Name System)是因特网的一项服务,它作为域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网.人们在通过浏览器访问网站时只需要记住网站的域名即可,而不需 ...

  8. R语言学习笔记——C#中如何使用R语言setwd()函数

    在R语言编译器中,设置当前工作文件夹可以用setwd()函数. > setwd("e://桌面//")> setwd("e:\桌面\")> s ...

  9. 当面对会反制遭破解装置的App该如何顺利提取数据

    在检测App的过程之中,总会遇到比较棘手的,以”侦测是否遭破解的装置”为例,便会是个不好处理的状况.当App具备侦测装置是否已遭Root时,一旦发现装置已遭破解,便会停止运行,等于是只准安装及运行在未 ...

  10. python_0基础开始_day03

    第三节 一.整形和布尔值的转换 int整型 python3: 全部都是整型 python2: 整型,长整型long 十进制转换二进制 # 将十进制的168转换为二进制 ​#得出结果 将十进制的168转 ...