简短而言，选择器的优先级可以按照如下方式排序：内联 > ID 选择器 > 伪类 = 属性选择器 = 类选择器 > 元素选择器[p] > 通用选择器(*) > 继承样式
BUT，CSS 选择器究竟是如何计算优先级的？
例如，有如下选择器：
1 | #nav ul li a.myclassname:hover { |
其优先级计算结果为：
本指南是一个“Hello World”形式的教程，它以一个简单的示例介绍了如何安装，配置和使用 Prometheus。您将在本地下载并运行 Prometheus，将其配置并监测其自身和示例应用程序，然后使用查询，规则和图表等来利用收集的时间序列数据。
Downloading and running Prometheus
待续。。。
良好的 CSS 架构目标
CSS 中的继承
继承规则：与元素外观（文字颜色，字体等）相关的样式会被继承；与元素布局相关的样式不会看被继承。
CSS 中的长度
1. 绝对长度
| 单位标识符 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 磅 |
| pc | pica |
组织内容
| 问题 | 使用元素 |
|---|---|
| 表示段落 | p |
| 将全局属性应用到一片内容上，但不表示任何其他内容分组 | div |
| 保留 HMTL 文档中的布局 | pre |
| 表示引自他处的内容 | blockquote |
| 表示因段落级别的主题转变 | hr |
| 生成有序列表 | ol、li |
| 生成无序列表 | ul、li |
| 生成项目编号不连续的有序列表 | ol、li，并设置 li 元素的 value 属性 |
| 生成术语及其定义的列表 | dl、dt、dd |
| 生成带自定义项目编号的列表 | ul，配合使用 CSS 的 :before 选择器和 counter特性 |
| 表示插图 | figure、figucaption |
文档标题
title 元素设置文档标题或名称。
相对 URL 解析基准
base 元素设置一个基准的 UTL，让 HTML 文档中的相对连接再次基础上进行解析。相对链接省略 URL 中的协议、主机和端口号，需要根据别的 URL 得出其完整形式。
局部属性：href、target。
用元数据说明文档
meta 元素可以用来定义文档的各种数据，一个 HTML 文档中可以包含多个 meta 元素。
局部属性：name、content、charset、http-quiv
1. 指定名／值元数据对
1 | <head> |
accesskey 属性
accesskey 属性可以设定一个或几个用来选择页面上元素的快捷键。用来触发 accesskey 机制的按钮组和因平台而异。
1 | <label>Name:<input type="text" name="name" access="n"/></label> |
class 属性
用于将元素归类。
^[0-9]*$^\d{n}$^\d{n,}$^\d{m,n}$^(0|[1-9][0-9]*)$^([1-9][0-9]*)+(.[0-9]{1,2})?$^(-)?\d+(.\d{1,2})?$^(-|+)?\d+(.\d+)?$^[0-9]+(.[0-9]{2})?$^[0-9]+(.[0-9]{1,3})?$^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]*$^-[1-9][]0-9"*$ 或 ^-[1-9]\d*$^\d+$ 或 ^[1-9]\d*|0$^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$^\d+(.\d+)?$ 或 ^[1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$^[1-9]\d*.\d*|0.\d*[1-9]\d*$ 或 ^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 或 ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$^[\u4e00-\u9fa5]{0,}$^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$^.{3,20}$^[A-Za-z]+$^[A-Z]+$^[a-z]+$^[A-Za-z0-9]+$^\w+$ 或 ^\w{3,20}$^[\u4e00-\u9fa5A-Za-z0-9_]+$^[\u4e00-\u9fa5A-Za-z0-9]+$ 或 ^[\u4e00-\u9fa5A-Za-z0-9]{2,20}$^%&',;=?$" 等字符：[^%&',;=?$"]+~ 的字符：[^~"]+^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?[a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[w-./?%&=]*)?$^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$\d{3}-\d{8}|\d{4}-\d{7}^\d{15}|\d{18}$^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$^[a-zA-Z][a-zA-Z0-9_]{4,15}$^[a-zA-Z]\w{5,17}$^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$^\d{4}-\d{1,2}-\d{1,2}^(0?[1-9]|1[0-2])$^((0?[1-9])|((1|2)[0-9])|30|31)$^[1-9][0-9]*$^(0|[1-9][0-9]*)$^(0|-?[1-9][0-9]*)$^[0-9]+(.[0-9]+)?$^[0-9]+(.[0-9]{2})?$^[0-9]+(.[0-9]{1,2})?$^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$ 1到3个数字，后面跟着任意个 逗号+3^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$[^\x00-\xff] （包括汉字在内，可以用来计算字符串的长度（一个双字节字符长度计2，ASCII 字符计1））\s* （可以用来删除空白行）<(S*?)[^>]*>.*?</script>|<.*? /> （网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力）^\s*|\s*$或(^\s*)|(\s*$) （可以用来删除行首行尾的空白字符（包括空格、制表符、换页符等等），非常有用的表达式）[1-9][0-9]{4,} （腾讯 QQ 号从10000开始）[1-9]\d{5}(?!\d) （中国邮政编码为6位数字）\d+.\d+.\d+.\d+ （提取 IP 地址时有用）((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))HTML5 提供一种应用程序缓存机制，使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器应该缓存的资源并使得离线用户可用。 在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。
优势