什么是css？

CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。

css如何工作的？

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

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

如何在HTML里应用css？

1.外部样式表
将你的 CSS 保存在一个独立的扩展名为 .css 的文件中，并从HTML的元素中引用它。

2.内部样式表
将你的css放入

ID选择器

ID选择器是由一个哈希/磅符号 (#)，后面跟着给定元素的ID名称组成的。任何元素都可以使用id属性设置唯一的ID名称。id的名称必须是文档中唯一的。

 — "Good morning."
#say {
  color = red;
}

通用选择器

它允许选择在一个页面中的所有元素。用*表示。

* {
  padding: 5px;
  border: 1px solid black;
}

属性选择器

这些属性选择器尝试匹配精确的属性值：

[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“ 的子字符串）。

伪类选择器

一个CSS伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。
a类选择
a:link 匹配所有未被点击的链接
a:visited 匹配所有已被点击的链接
a:active 匹配鼠标已经其上按下、还没有释放的E元素
a:hover 匹配鼠标悬停其上的E元素
其他
:first-child 匹配作为长子（第一个子女）的元素
:nth-child(n) 匹配父元素的第n个子元素，必须先找到父元素，然后再向下找
:nth-last-child(n) 匹配其父元素的倒数第n个子元素
:nth-of-type 父元素下，同种标签类型的第一个元素
:nth-last-type(n) 与nth-last-child(n)，匹配使用同种标签的元素
:first-of-type 匹配父元素下使用同种标签的第一个子元素
:last-of-type 匹配父元素下使用同种标签的最后一个子元素

伪元素

伪元素跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ，同样是添加到选择器后面去选择某个元素的某个部分。
::after ::after用来创建一个伪元素，作为已选中元素的最后一个子元素。
::before::after用来创建一个伪元素，作为已选中元素的最后一个子元素。
::first-letter第一行的第一个字母
::first-line第一行应用样式

组合器和选择器组

选择器组
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）

CSS简介及选择器