CSS工作原理到CSS选择器

CSS的工作方式：

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

1. 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
2. 浏览器显示 DOM 的内容。

使用CSS的三种方法：

1.外部样式表：在同一目录中创建css.css文件，<link rel="stylesheet" href='css.css'>

2.内部样式表：在html文件的head元素中直接写样式，<style>#insideStyle{color:burlywood;}</style>

3.内联样式：在元素中直接写样式，<div style='color:coral'>inlineStyle</div>

CSS语法：CSS 有超过300 个不同的属性以及几乎无穷无尽的属性值。属性和属性值不能任意组合：每个属性都有一个已经定义好的可用属性值范围。 

选择器：{属性：属性值}

CSS 的属性和属性值都是区分大小写的

声明块里的每一个声明必须用半角分号（;）分隔，否则代码会不生效（至少不会按预期结果生效）。声明块里的最后一个声明结束的地方，不需要加分号，但是最后加分号是个好习惯，因为可以防止在后续增加声明时忘记加分号。

 

CSS选择器：

初始化css：

/*reset.css*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, button {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

outline: none;

vertical-align: baseline;

}

1.类型选择器（元素选择器）：div{}

2.类选择器：.className{ }

3.ID选择器：#idName{ }     /*一个ID名称必须在文档中是唯一的*/

4.通用选择器：*{ }

5.属性选择器：data-* 属性被称为 数据属性

（存在和值属性选择器：

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
• [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

子串值属性选择器：

• [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
• [attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
• [attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
• [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。）

6.伪类： :hover     :active     :first-child             （ example ）

7.伪元素： ::after     ::before                         [href^=http]::after { content: '⤴';}

8.组合选择器：

（

选择器组	A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
后代选择器	A B	匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器	A > B	匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器	A + B	匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器	A ~ B	匹配B元素，满足条件：B是A之后的任意一个兄弟节点（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

）