一、At-rule
一种以@开头的声明语句，以分号;结尾。语法规则为: @IDENTIFIER (RULE); 。
At-rule主要用作表示CSS的行为，参考: https://www.cnblogs.com/wuyinghong/p/3700519.html
1、@charset—定义被样式表使用的字符集
2、@import——告诉CSS引擎包含外部的CSS样式表
3、@namespace——告诉CSS引擎所有的内容都必须考虑使用XML命名空间前缀
4、嵌套at-rules
（1）@media——条件组规则。如果设备符合标准定义的条件查询则使用该媒体
（2）@font-face——描述了一个将从外部下载的字体
（3）@keyframes——描述了中间步骤在CSS动画的序列
（4）@page——描述了文件的布局变化，当要打印文档时。
（5）@supports——条件组规则，如果浏览器满足给出的规则，则把它应用到内容中
（6）@document——条件组规则，如果被用到文档的CSS样式表满足了给定的标准，那么将被应用到所有的内容中。
例子： dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: ‘...\A..\A.‘;
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
二、CSS规则定义
p {color:red;text-align:center;}
由选择器后面跟着一对{}花括号，花括号内部有一条或多条声明语句；每条声明语句使用"属性: 值;"的形式，中间用冒号，结尾用分号。
注释以 "/*" 开始, 以 "*/" 结束。
CSS规则的定义涉及到两个方面: 属性和选择器，参考: http://phpstudy.php.cn/css3/
三、CSS的属性
参考: https://www.runoob.com/cssref/css-reference.html
四、CSS的选择器
CSS选择器的权值: important(最高，在设置属性值后面添加"!important")、内联(1000)、ID(100)、Class(10)、Tag(1)。
CSS选择器的优先级: 根据选择器的权值计算，组合选择器的权值会进行叠加。
同一个元素应用可能多个选择器时，权值大的优先；如果权值相同，那么则选择最后加载的选择器。
如果选择器设置为class="A B C"，最终选择的选择器不是按A/B/C的先后顺序，而方式按照A/B/C的CSS加载顺序。
1、基本选择器
(1) 标签选择器(元素选择器)
直接写元素标签名字，比如p。其中比较特殊的是*，它表示选择所有元素。
(2) 类选择器
.class，其中class就是元素的class属性需要填写的值。
(3) ID选择器
#id，其中id就是元素的id属性值。(HTML页面中能够重复使用相同的ID)
(4) 属性选择器
元素[属性=值][...]的基本格式，如果没有"=值"的部分就表示元素需要包括该属性。
可以多个属性同时使用；其中=又扩展为~=、|=、^=、$=、*=。
2、派生选择器
(1) 后代选择器
用空格隔开的多个选择器名字，比如div p表示div包含的所有p元素，不管是div直接包含还是间接包含。
(2) 子元素选择器
用>号表示，比如div>p表示div下的所有子元素p，只能直接包含。
(3) (普通)兄弟选择器
用~号表示，比如div~p表示div之后的所有同级兄弟p元素，但是div之前的兄弟元素p不包含在内。
(4) 相邻兄弟选择器
用+号表示，比如div+p表示div后面相邻的p元素。(div和p在同一个层次上，并且p刚好在div后面)
(5) 并集选择器
用,号表示，比如div,p表示所有的div元素和p元素。
(6) 交集选择器
用.号表示，比如h3.special只能用于<h3 class="special">这样的标签中。
注意它和h3 .special不一样，中间有空格和没空格是有区别的。
(7) 伪类选择器
用:号表示，一个选择器可以同时使用多个伪类。
伪类是为了弥补选择器的不足。
(8) 伪元素选择器
用::表示，一个选择器只能使用一个伪元素。
伪元素的本质则是创建一个虚拟元素然后在应用样式。
转载自：https://www.cnblogs.com/ringboow/p/11134373.html
原文地址：https://www.cnblogs.com/planetwithpig/p/11823732.html