CSS常用选择器、权重及层叠特性

标签选择器及权重

• 直接将HTML元素的标签名当做选择器来用 
• 语法：标签选择器{css属性名:css属性值;}   p{color: black}
• 权重：1

类选择器及权重

• 将html元素的class标签属性值，当做选择器使用，需要在这个标签属性值前面加"." ，一个HTML元素可以有很多个标签属性值(类名)，每个类名之间用空格隔开；类名可以重复使用；
• 语法：类选择器{css样式;}   .box{color: black}
• 权重：10 

ID选择器及权重

• 将html元素的id标签属性值，当做选择器使用，需要在这个标签属性值前面加"#", 一个HTML元素，id标签属性值只能用一次，id在html中具有唯一性；
• 语法：ID选择器{css样式;}   #box{color: black}
• 权重：100 

通配符选择器及权重

• 匹配全部HTML元素 , 一般不使用，因为全部匹配比较耗性能,一般用来清除浏览器默认自带的间距样式 
• 语法 *{ margin:0;padding:0; } 
• 权重：0 ~ 1

后代选择器(派生选择器)

• 在一个根元素的范围内，查找到它的后代元素,  符号用空格隔开
• 语法：祖辈选择器 后代选择器{}  ul  li{}
• 权重: 单个选择器权重之和

属性选择器及权重

• 利用标签的属性名和属性值来选择html元素 
• 语法: [标签属性名]{ 属性名：属性值}、[标签属性名 = 属性值]{ 属性名：属性值} [title]{} 、 [title=zfpx]{}
• 权重: 10 

分组/并集选择器及权重

• 同一份css样式，可以一次性的添加给多个不同html元素 
• 语法：选择器1，选择器2，选择器3 {属性名：属性值 }    h1, h2, h3{color: black}
• 权重：分组选择器将不同的html分为一组，权重计算的时候都是独立计算，不会叠加 

交集选择器及权重

• 两种选择器同属一个元素的时候，我们可以使用交集选择器来进行元素的准确选择,准确查找html元素，增加html元素权重 
• 语法: 交集选择器是由两个选择器组合到一起, 交集选择器中间没有任何符号或者空格; p.box{color: black}
• 权重：所有组合选择器权重之和 

子级选择器及权重

• 存在包含关系的元素选择，通过父级确定选择子级 ; 父级选择器是用来确定取值范围 , 子级选择器才是我们要添加样式的那个元素 , 子级选择器必须是紧邻的父子关系
• 语法：父级选择器 > 子级选择器 { 属性名 : 属性值}  ul>li{color: black}
• 权重：所有选择器之和 

伪类选择器及权重

• 给页面（元素）添加某种状态，叫做伪类选择器； 
• 权重: 10
• :link{} 默认的状态
• :hover{} 鼠标经过（滑过）的状态
• :active{} 点击时的状态
• :visited{} 点击后的状态

 伪元素选择器及权重

• 通过css代码向指定元素内添加假的(html中不存在)的元素, :before 会出现在元素所有内容之前, :after 会出现在元素所有内容之后
• 使用伪元素的时候要保证两个前提：
• 要有display：block 这个属性
• 要有content这个属性，这个属性的属性值可以为空，但是引号不能少

2.CSS样式之颜色设置

• color: 检索或设置对象的文本颜色;
• opacity: 检索或设置对象的不透明度; 使用浮点数指定对象的不透明度。值被约束在[0-1]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值;

颜色的三种表示方式

• 十六进制颜色：十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
• RGB颜色：RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）
• 颜色的名称：例如： white，red，black等等；

RGBA的作用

• RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道， 它规定了对象的不透明度，alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

3.CSS样式之文字设置

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）

• font 复合样式 font-style | font-variant | font-weight | font-size | line-height | font-family
• 字体样式: font-style
• 文本是否为小型的大写字母：font-variant
• 字体粗细: font-weight
• 字体的大小: font-size
• 字体的类型: font-family

字体样式: font-style

• normal：指定文本字体样式为正常的字体
• italic： 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
• oblique： 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

文本是否为小型的大写字母: font-variant

• normal： 正常的字体
• small-caps：小型的大写字母字体

字体粗细: font-weight

• normal： 正常的字体。相当于数字值400
• bold： 粗体。相当于数字值700。
• bolder： 定义比继承值更重的值
• lighter： 定义比继承值更轻的值
• integer： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

字体大小: font-size

• 单位: px
• 单位: %

字体系列: font-family

• family-name = arial | georgia | verdana | helvetica | simsun and etc（字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起）
• generic-family = cursive | fantasy | monospace | serif | sans-serif(字体序列名称)
• body { font-family: helvetica, verdana, sans-serif; }

4.CSS样式之文本设置

CSS文本属性可定义文本的外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

• 文本颜色： color
• 字符间距 : letter-spacing
• 设置行高： line-height
• 文本对齐方式： text-align
• 文本修饰： text-decoration
• 文本缩进： text-indent ( em缩进字符）
• 文本阴影： text-shadow
• 文本转换 ： text-transform
• 设置元素的垂直对齐：vertical-align
• 设置元素中空白的处理方式： white-space
• 设置字间距 ：word-spacing

text-transform 检索或设置对象中的文本的大小写

• none： 无转换
• capitalize： 将每个单词的第一个字母转换成大写
• uppercase： 将每个单词转换成大写
• lowercase： 将每个单词转换成小写

white-space设置或检索对象内空格的处理方式

• normal： 默认处理方式。
• pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
• nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
• pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

word-break 设置或检索对象内文本的字内换行行为

• normal： 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
• keep-all： 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
• break-all： 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。 
• 对于异议解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all属性值；

word-wrap 设置或检索当内容超过指定容器的边界时是否断行

• normal： 允许内容顶开或溢出指定的容器边界。
• break-word： 内容将在边界内换行。如果需要，单词内部允许断行。

overflow-wrap 设置或检索当内容超过指定容器的边界时是否断行

• normal： 允许内容顶开或溢出指定的容器边界。
• break-word： 内容将在边界内换行。如果需要，单词内部允许断行
• CSS3中将<word-wrap> 改名为 overflow-wrap

text-align 设置或检索对象中内容的水平对齐方式

• left： 内容左对齐。
• center： 内容居中对齐。
• right： 内容右对齐

word-spacing 检索或设置对象中的单词之间的最小，最大和最佳间隙

• normal：默认间隔
• length：用长度值指定间隔。可以为负值。
• percentage：用百分比指定间隔。可以为负值。（CSS3）

letter-spacing 检索或设置对象中的字符之间的最小，最大和最佳间隙

• normal：默认间隔
• length:  用长度值指定间隔。可以为负值。
• percentage：用百分比指定间隔。可以为负值。（CSS3）

text-indent 检索或设置对象中的文本的缩进

• length：用长度值指定文本的缩进。可以为负值。
• percentage：用百分比指定文本的缩进。可以为负值。

vertical-align 设置或检索内联元素在行框内的垂直对其方式

• baseline： 将支持valign特性的对象的内容与基线对齐
• sub： 垂直对齐文本的下标
• super： 垂直对齐文本的上标
• top： 将支持valign特性的对象的内容与对象顶端对齐
• text-top： 将支持valign特性的对象的文本与对象顶端对齐
• middle： 将支持valign特性的对象的内容与对象中部对齐
• bottom： 将支持valign特性的对象的文本与对象底端对齐
• text-bottom： 将支持valign特性的对象的文本与对象顶端对齐
• percentage： 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
• length： 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

line-height 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

• normal： 允许内容顶开或溢出指定的容器边界。
• length:  用长度值指定行高。不允许负值。
• percentage：用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。
• number:  用乘积因子指定行高。不允许负值。

5.CSS层叠特性

层叠性：就是css处理冲突的能力；对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器；

权重总结

• 先看有没有选中，如果选中，则以(id数量，类数量，标签数量)来计算权重，谁大听谁的，如果都一样，听后写的为准。
• 如果都没有选中，那么权重为0,如果大家都是0，就近原则

样式表冲突的总结

• 对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
• 对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
• 外部样式表的ID选择器 > 内嵌样式表的标签选择器