CSS语法规则

一、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