css权重的计算和特性

一、css权重的计算

属性值的计算过程：从无属性值到有属性值，没写的一些会用默认样式，有的会继承

1.确定声明值
2.层次冲突（计算权重）
3.使用继承
4.默认值

选择符/选择器

1、当一个元素同时被多个选择符同时选中时，最终会执行的是权重高的选择符定义的样式
2、当选择符的权重一样的时候，写在后面的选择符的样式会被执行
上面的这两个情况仅限于定义的样式产生冲突的时候，没有产生冲突的时候，各自的样式就都会被执行

权重计算

元素选择符/类型选择符     				权重：0001
	语法： 元素名称{属性：属性值；属性：属性值；}
	说明：元素选择符就是把元素名称当做选择符使用
	特点：会选中当前这个页面中所有的这个元素，给其添加样式

id选择符 							权重：0100
	语法： #id名{属性：属性值；属性：属性值；}
	定义id名：<元素  id="id名"></元素>
	id具有唯一性：在同一个页面中，同样的id名只能出现一次，不允许重复出现
	最大的用处：创建网页的外围结构
	命名规则：必须以字母(a-zA-Z)开头，后面可以写数字(0-9)、字母(a-zA-Z)、下划线 _ 、连接符 -
			box1   box   box_div  box-div  box1div
		要求：最好是见名知意

class选择符/类选择符  				权重：0010
	语法： .class名{属性：属性值；属性：属性值；}
	定义class名：<元素  class="class名"></元素>
	class名可以重复出现
	class选择符最适合定义一类样式，可以给不同的元素添加相同的class名，将他们划分到一个类中
	一个元素可以同时身处在多个类中,也就是一个元素可以同时拥有多个class名
	细化精确写法： 通过元素选择符和类选择的结合从众多的元素中选择到我们需要的元素
			元素选择符.class名{属性：属性值；属性：属性值；}
			最终权重为两种选择符权重相加之和     11
	命名规则：必须以字母(a-zA-Z)开头，后面可以写数字(0-9)、字母(a-zA-Z)、下划线 _ 、连接符 -
			box1   box   box_div  box-div  box1div
		要求：最好是见名知意

群组选择符  							权重：各自对应的选择符的权重
	语法：  选择符1, 选择符2, 选择符3, 选择符3,...{属性：属性值；属性：属性值；}
	说明: 当多个元素需要应用相同的样式时，可以通过逗号分隔的方式将选择符书写选中对应的元素

包含选择符/选择符  					权重：所有使用到的选择符的权重相加之和
	语法：  选择符1  选择符2{属性：属性值；属性：属性值；}
	通过空格分隔的方式将选择符分隔开
	说明： 选择符2 是 选择符1 的后代（子级是后代，子级的子级依旧时候带，后代是指被包含的所有子元素）
		  后代选择符中被选择的元素是写在最后的选择符指向的元素，写在前面的选择符都是用来规范范围的

伪类选择符 							权重：0010
	:link{属性：属性值;} 	定义超链接的初始状态;
    :visited{属性：属性值;}	定义超链接被访问后的状态;
    :hover{属性：属性值;}	定义鼠标悬停，即鼠标划过超链接时的状态;
    :active{属性：属性值;} 	定义超链接被激活时的状态，即鼠标按下时超链接的状态;
	说明 ：当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
			a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效
	:hover不一定非要用在超链接标签上，也可以用在其他标签上用来设置当鼠标滑过后的状态
		1、可以用来设置当鼠标滑过改变元素自身的样式
		2、可以用来设置当鼠标滑过元素改变子元素的样式

通配符  								权重：0000
	语法：*{属性：属性值；属性：属性值；}
	说明：通配符可以选择到当前这个页面中所有的标签，给其添加样式
	用处： *{margin:0;padding:0;}

选择符权重总结

css中用四位数字表示权重，权重的表达方式如：0，0，0，0；
类型选择符的权重为 			0001
class选择符的权重为			0010
id选择符的权重为				0100
属性选择符的权重为				0010 		
伪类选择符的权重为				0010
伪元素（对象）选择符的权重为		0001		
继承样式的权重为				0000		
群组集合选择符权重为他本身
包含选择符的权重为			包含选择符的权重之和
内联样式的权重为				1000
通配符的权重为				0000
！impontent					无穷大

css特性

层叠性：
一个元素可以同时被多个css选择符同时选中，如果多个选择符之间定义的样式不产生冲突，则最终多个选择符定义的样式都会被执行；如果多个选择符之间定义的样式产生了冲突，则最终会执行权重高的选择符定义的样式
继承性：
在css中给父元素设置某些样式，子元素在没有设置此样式的情况下也会应用父元素设置的此样式，但是如果单独子元素设置了此样式，则就不会执行父元素设置的此样式
继承得到的样式没有特殊性