一、CSS三大特性
- 1.继承性
- 2.层叠性
- 3.优先级
  - 权重
  - !important注意点
  - 例子
二、CSS选择器
- 项目
  - 项目

一、CSS三大特性

1.继承性

子标签可以继承父类的标签的样式
color,text-开头，line-开头，font-开头的可以继承，关于文字样式的可以继承，但并不是所有的属性都可以继承的，比如所有关于盒子的，定位的，布局的属性不可以继承
a标签是不可以继承父类的color和font的
h 标题标签不能继承父类设置文字大小

2.层叠性

层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义p标签标记字号大小为12像素，链入式定义p标签标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

层叠性是css解决冲突的能力
叠性能力大小要根据权重的高低来决定

3.优先级

权重叠加计算优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
所有都相同时，声明靠后的优先级大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

权重

权重计算规则：

	内联样式	ID选择器	类，伪类和属性选择器	标签选择器和伪元素选择器	通用选择器、子选择器、相邻选择器、同胞选择器
例子	style=””	#content	content、:hover	div、p、:before	（*）、（>）、（+）、（~）
权重	1000	100	10	1	0

!important注意点

!important的提升的是一个属性，并不是选择器
!important无法提升继承的权重

例子

<style>
	div {color: red!important;}
	ul {color: green;}
</style>
<div>
	<ul><li>字体颜色</li></ul>
</div>

判断方法：虽然!important优先级最高，但是没有继承性，li的颜色继承自ul，所以最后显示绿色。

<style>
	.c1 .c2 div {color: red;}
	div #box3 {color: yellow;}
	#box1 div {color: blue;}
</style>
<div id="box1" class="c1">
	<div id="box2" class="c2">
		<div id="box3" class="c3">颜色</div>
	</div>
</div>

判断方法：因为三个样式都可以命中元素（颜色），所以通过权重判断，第一个没有ID选择器PASS掉，第二个和第三个一样，通过层叠（后面的样式覆盖前面的样式）决定颜色，所以是blue。

<style>
	div div div div div div div div {color: red;}
	.last-div {color: yellow;}
</style>

多级嵌套的div，最后一个有last-div样式。判断方法：因为都可以命中元素，所以通过权重，类选择器>元素选择器，所以选择yellow

<style>
	div div {color: red;}
	div {color: yellow;}
</style>
<div>
	<div>
	</div>
</div>

判断方法：因为都可以命中对应元素，权重第一个大于第二个（比较标签选择器数量），显示red。

<style>
	#parent #child {color: red;}
	#parent p.c2 {color: yellow;}
	div.c1 p.c2 {color: green;}
	#parent {color: black!important;}
	div#parent.c1 {color: yellow;}
</style>
<div id="parent" class="c1">
	<div  id="child" class="c2">字体颜色</div>
</div>

判断方法：先通过是否命中对应元素排除第四和第五个样式，然后根据权重比较前三个样式：
第一个：两个ID ;第二个：一个ID一个类;第三个：两个类。所以根据权重ID>类，最后显示red

<style>
	div p {color: red;}
	#parent {color: yellow;}
	p.c2 {color: green;}
</style>
<div id="parent" class="c1">
	<p class="c2">字体颜色</p>
</div>

判断方法：第二个没有命中PASS掉，第一个和第三个比较权重，由于第一个没有类，所以是green。

二、CSS选择器

标签选择器
.class 选择器是指定类的所有元素的样式。

	p {color: yellow;}

id选择器
#id选择器指定具有ID的元素的样式.
ID选择器和类选择器用法一样，区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器，浏览器不会报错但是不符合W3C标准了，所以ID选择器命名必须要唯一性)

	#id {color: yellow;}

类选择器
类选择器，是对HTML标签中class属性进行选择。CSS类选择器的选择符是 “.“类选择器在css样式编码中是最常用到的.

	.c {color: yellow;}

交集选择器
交集选择器又称标签指定式选择器,由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。

	p.c {color: yellow;}

并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

	p, .c {color: yellow;}

后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

	p .c .a {color: yellow;}

子元素选择器

	p>.c>.a {color: yellow;}

属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。

dom[attr] //用于选取带有指定属性的元素
dom[attr = value]//用于选取带有指定属性值的元素
dom[attr ~= value]//用于选取属性值中包含指定词汇的元素
dom[attr |= value]//用于选取带有指定值value-开头的或者值为value的元素
dom[attr ^= value] //用于选取属性值以value开头的元素
dom[attr $= value] //用于选取属性值以value结尾的元素
dom[attr *= value] //用于选取属性值中包含value的元素

结构伪类选择器

（1）伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。

最常见的伪类选择器
     a:link{ color: #ff6600 } /* 未被访问的链接 */  
     a:visited{ color: #87b291 } /* 已被访问的链接 */  
     a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */  
     a:active{ color: #55b28e } /* 正在被点击的链接 */

（2）伪元素选择器

在CSS中，主要有四个伪元素选择器。
   * first-line伪元素选择器
   用于向某个元素中的第一行文字使用样式。
   * first-letter伪元素选择器
   用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
   * before伪元素选择器
   用于在某个元素之前插入一些内容。
   * after伪元素选择器
   用于在某个元素之后插入内容。

（3）选择器first-child、last-child、nth-child、nth-last-child、only-child

    dom:first-child单独指定第一个子元素的的样式。
    dom:last-child单独指定最后一个子元素的的样式。
    dom:nth-child(n) 选择器匹配正数下来第 N 个子元素
    dom:nth-child(odd)选择器匹配正数下来第奇数个子元素
    dom:nth-child(even)选择器匹配正数下来第偶数个子元素
    dom:nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
    dom:nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
    dom:nth-last-child(even)选择器匹配倒数下来第偶数个子元素
    dom:only-child选择器，只对唯一的子元素起作用
    dom:first-of-type 找第一个同类型的
    dom:last-of-type 找最后一个同类型的
    dom:nth-of-type(n) 选择器所在父元素中同类型第n个位置匹配的子元素
    dom:nth-of-type(odd)选择器所在父元素中同类型奇数位置匹配的子元素
    dom:nth-of-type(even)选择器所在父元素中同类型偶数位置匹配的子元素
    dom:nth-last-of-type(n) 选择器所在父元素中同类型倒数第n个位置匹配的子元素
    dom:nth-last-of-type(odd)选择器所在父元素中同类型倒数奇数位置匹配的子元素
    dom:nth-last-of-type(even)选择器所在父元素中同类型倒数偶数位置匹配的子元素
    dom:only-of-type 选择父元素只包含一个类型子元素的元素

UI状态伪类选择器
UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用.

dom:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
dom:active选择器被用来指定元素被激活时使用的样式
dom:focus选择器被用来指定元素获得光标聚焦点使用的样式，在文本框控件获得聚焦点并进行文字输入时使用。
dom:enabled选择器被用来指定当元素处于可用状态时的样式。
dom:disabled选择器被用来指定当元素处于不可用状态时的样式。
dom:read-only选择器被用来指定当元素处于只读状态时的样式。
dom:read-write选择器被用来指定当元素处于非只读状态时的样式。
dom:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
dom:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
dom:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
dom:selection伪类选择器用来指定当元素处于选中状态时的样式。
dom:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
dom:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
dom:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
dom:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
dom:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
dom:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

兄弟选择器

（1）通用兄弟元素选择器
用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

语法:<子元素>~<子元素之后的同级兄弟元素>{}
例子:
span~p{ //span的所有是p的兄弟标签都设置背景色为skyblue
   background: skyblue;
}

（2）相邻兄弟选择器
只选取该元素相邻的兄弟选择器

语法:<子元素>+<子元素之后的同级兄弟元素>{}
例子：
span+p{ //span的只有span之后的p标签设置背景色为skyblue
   background: skyblue;
}

通配符选择器(全局选择器)（*）

  *{
      padding:0;
      margin:0;
  }
  div *{
      background"pink;
  }

CSS三大特性及其选择器