CSS选择器

#CSS基本选择器

##选择器类型

1、选择所有元素
*{    }
2、根据标签类型选择元素
a{    }
3、根据类选择元素
.class{      }
4、根据id选择元素
#id{       }
5、根据属性选择元素
[href]{    }
[属性名=“属性值”] 选取含有指定属性值的元素
[属性名^=“属性值”] 选取属性值以指定内容开头的元素
			$														结束
			*														包含
<a href="XXX">靠谱学院<a>
6、    ：选择器动作
a:hover{    }
<a>XXX</a>

##选择器分组，相当于多个选择器的并集

通过选择器分组可以同时选中了多个选择器对应的元素
前面的符号该是啥还是啥
语法：
	选择器1，选择器2，选择器N{        }

##复合选择器，相当于多个选择器的交集

可以选中同时满足多个选择器的元素
前面的符号该是啥还是啥
语法：
	选择器1选择器2选择器N{         }

##后代元素选择器

选中指定祖先元素的指定后代元素
语法：
	祖先元素 后代元素{			}		可以设置多层	如 ：
														祖先1 后代 后代.....{			}
#d1 span{
	设置样式；
}

##子代元素选择器

选中指定父元素的指定子元素
语法：
	父元素>子元素
div>span{
	设置样式；
}

##伪类选择器

1、XX：link
2、XX：visited	（只能定义字体颜色）
3、XX：hover
4、XX：active
**这四个选择器的优先级是一样的
但是link和visited要写在hover和active上面**

##其他

1、获取焦点	xx：focus
	获取焦点即为选中某某文本框，
	如：	当选中文本框时，设置样式
2、指定元素前		xx：before
	before表示元素最前边的部分
	一般before都需要结合content（内容）这个样式一起使用
	通过content可以想before的位置添加一些内容
	
3、指定元素后		xx：after
	after表示元素的最后边的部分
4、选中的元素		xx：：selection

##兄弟元素选择器

1、后一个兄弟元素选择器
	作用：可以选中一个元素后紧挨着指定的兄弟元素
	语法：前一个 + 后一个
2、选中后边的所有兄弟
	语法：前一个~后边所有

##子元素伪类元素选择器

1、选择第一个子标签
	：first-child
2、选择最后一个子标签
	：last-child
3、选择指定位置的子元素
	：nth-child

##样式的继承

像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承。所以可以利用继承，可以将一些基本的样式设置给祖先元素，这样他所有的后代元素都会自动继承其样式
**但不是所有的样式都会被子元素所继承，比如：背景相关样式不会被继承**