一、选择器
层级选择器
书写规则：用空格隔开每一层选择器。
优势：只要选择器嵌套关系与html结构的嵌套关系正确，无论有多少层嵌套，都可以被选中。
尽可能的补全祖先选择器，来时范围精确。
交集选择器
书写规则：每选择器之间连续书写，没有任何空格。
同时标签名只可以出现一次，且必须出现在最前面
并集选择器
书写规则：每个选择器之间通过逗号隔开，且每组选择器在一行。
只要看到逗号，一定是并集选择器。
二.css代码规范
<!-- 1.四个空格为一个缩进 -->
<!-- 2.选择器与大括号之间有一个空格 -->
<!-- 3.属性名与冒号之间没有空格,冒号与之后的属性值有空格 -->
<!-- 4.一个属性独占一行，每个属性写完后面都要有分号 -->
<!-- 5.并集选择器，每组选择器独占一行 -->
<!-- 6.> + ~ 前后都有一个空格 -->
<!-- 7.属性值或者文本内容使用的引号选择双引号 -->
<!-- 8.属性值之中有逗号，逗号后面要有空格 -->
三.继承性
如果给父元素设置了一些样式，他的后代元素可以继承这些样式
只有文字属性可以被继承，盒子属性不能被继承
文字属性：color、font-系列、line-系列、text-系列。
盒子属性：background-系列、width、height、border-系列、浮动、定位等。
四.层叠性
多组选择器的样式可以作用在同一个元素上。
通过同样的选择器设置相同的样式，根据我们设置样式的距离，决定渲染的最终结果，后面的覆盖前面的。
层叠性：针对同一个元素标签，当设置了不同的选择器时，权重高的层叠掉权重低的样式。
五.权重
注意：比较权重的时候，一定要让选择器作用到元素上。
<!-- 比较权重 -->
1.都作用到了目标元素，权重不同，选择权重较大的
2.都作用到了目标元素，权重相同,根据有就近原则
3.一个作用到了目标元素，一个没有作用到目标元素，用作用到目标元素的
4.都没有作用到目标元素，但是作用了相同的父元素，比较权重，用权重大的
5.都没有作用到目标元素，但是作用了相同的父元素，权重相同，根据就近原则
6.都没有作用到目标元素，且作用不同父元素，考虑继承，根据就近原则
7.并集选择器，拆开来看，一组一组的确认权重。
<!-- 权重排序 -->
!important>行内式>id>类|伪类|属性>标签|伪元素>通配符，继承等
!important
<!-- !important 提高优先级 -->
<!-- 一次只可以影响一条样式 -->
<!-- 只有样式可以用，选择器不能使用 -->
颜色表示法
英文法，rgb法 color：rgb(255，255，255);，十六进制法color：#ffffff；
六.文字和文本样式
<!-- 文字 -->
<!-- 设置颜色 -->
<!-- color -->
<!-- font系列 -->
<!-- 设置文字字号 -->
<!-- font-size -->
<!-- 可以直接使用英语单词但是单词一般很少使用 如 ：large，small，larger，medium，smaller
一般直接使用数字设置字体的大小 单位（px em rem） -->
<!-- em单位 -->
<!-- em作为单位时在设置的文字字号时，em是相对于父元素的字号大小而言 -->
<!-- 在设置非文字的样式作为单位是，相对的自身的字号大小 -->
<!-- rem单位 -->
<!-- rem在作为单位是是相对于根元素 html的字号大小而言的 -->
<!-- 设置文字的字体 -->
<!-- font-farmily -->
<!-- 一般会设置多个字体，为了防止有的电脑没有某种字体，导致无法显示 -->
<!-- 多个字体设置时，使用逗号隔开，同时对英文字体的设置放在最前面 -->
<!-- 设置文字的风格 -->
<!-- font-style -->
<!-- 属性值可以为 italic 倾斜 normal 正常 -->
<!-- 设置字体的粗细 -->
<!-- font-weight -->
<!-- 属性值可以设置为100-900之间的整数，也可以设置为英文单词例如： -->
<!-- bold 粗 bolder 更粗 normal 正常 lighter 细 -->
<!-- 设置英文字符大小写 -->
<!-- font-variant -->
<!-- 属性值 small-caps 设置后英文字符就会变大写-->
<!-- font设置可以直接完成 -->
<!-- font是一个复合的属性,可以统一设置font属性 -->
<!-- 顺序为:font-style font-variant font-weight font-size/line-height font-family -->
<!-- 字体样式 字母大小写(可选) 字体粗细 字体大小 行高 字体 -->
<!-- 例 font: italic normal 10px/30px 楷体,宋体-->
<!-- 注意:字体大小与行高之间有一个斜杠来分开 --><!-- 设置文本 -->
<!-- text系列 -->
<!-- text-decoration 文本修饰-->
<!-- text-decoration：none; 清除文本样式 -->
<!-- text-decoration：underline; 设置下划线 -->
<!-- text-decoration：overline; 设置上划线 -->
<!-- text-indent 缩进 -->
<!-- 一般使用em作为单位 -->
<!-- em作文不修饰文字的单位是,会对于本本身字号来确定大小,因此不管字体怎么变,只要设置2em
文本始终会缩进2字符 -->
<!-- 也可以使用px作为单位 -->
<!-- 设置文本对齐方式 -->
<!-- text-align 设置文本对齐方式 -->
<!-- text-align：left; 左对齐-->
<!-- text-align：right; 右对齐-->
<!-- text-align: center; 居中对齐-->
<!-- text-align: justify; 左右对齐(分散对齐)-->
<!-- 其他文本修饰 -->
<!-- 设置垂直对齐方式 -->
<!-- vertical-align -->
<!-- 设置的是同一行内的元素的垂直对齐方式 -->
<!-- 属性值 -->
<!-- vertical-align: bottom; 在底部对齐 -->
<!-- vertical-align: top; 在顶部对齐-->
<!-- vertical-align: middle; 在中间对齐 -->
<!-- 字间距 -->
<!-- letter-sapcing：2px; -->
<!-- 设置字间距,是对英文和汉字都有效果 -->
<!-- 词间距 -->
<!-- word-spacing：2px; -->
<!-- 设置词间距，对于英文诱效果，但是当文字之间存在空格时，同样也会对文字起效果 -->
<!-- 空白处理 -->
<!-- white-space 指定行内的空白元素怎么处理-->
<!-- white-space：normal； 默认值，会进行空白折叠，进行自动换行-->
<!-- white-space：nowrap； 空白折叠，不会自动换行-->
<!-- white-space：pre；保留原格式，不会自动换行 -->
<!-- white-space：pre-line； 空白折叠，自动换行-->
<!-- white-space：pre-wrap； 空白不折叠，自动换行--> 标签：权重,样式,元素,目标,第二天,CSS,选择器,作用 来源： https://blog.csdn.net/zhwqqqqq/article/details/123099997
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。