小白对小白——CSS选择器基础及可继承的css属性

1. 基本选择器

	（1）类型选择器
			什么时候用：某一个或者某些元素同时进行改变的时候
			用法：元素或者标签｛｝ 比如div｛｝

div{
	height: 200px;
	width: 200px;
	background: pink;
}

	（2）class选择器（类选择器）
			什么时候用？需要区分某个或某些的时候
			用法：先在HTML结构中用class属性起名
			然后在CSS里利用class值起名
			语法：.class名字｛｝

<div class="box"></div>
.box{
	height: 200px;
	width: 200px;
	background: pink;
}

		3）id选择器
			用法与class类似，html中取id名，并且将.换成#

<div id="box"></div>
# box{
	height: 200px;
	width: 200px;
	background: pink;
}

		4）群组选择器
			什么时候用？需要简化代码时
			比如：多个容器都需要宽度是100，那么可以用群组选择器实现
			语法：选择器1，选择器2，选择器3｛｝
			群组选择器的整体是没有权重的，但是独立去看是有的

div,h1,h2{
	background-color : red;
}

		5）通配符（全局选择器）
			什么时候用：需要所有的标签都执行某些样式或某个样式
			语法*｛｝
			慎用，一般是用来清除默认样式或者重置样式  *｛margin：0；padding：0；｝
			通配符的权重是0

*{
	margin: 0;
	padding: 0;
}

2. 层次选择器

	（1）包含选择器（后代选择器）
		包含选择器的语法 父元素（可以是最近的父元素或者是爷爷元素或者是其他的祖先元素）  子元素｛｝
	    .box p{ }   表示 box 下面所有的p元素
	（2）子选择器
		子(儿子)选择器的语法 父元素>子元素｛｝
		.box>p{}   
	（3）相邻兄弟选择器
		相邻兄弟选择器语法  选择器1+选择器2｛｝。实现的是选择器1最近的选择器2的对象变
	    .box+p{}
	（4）通用兄弟选择器
		通用兄弟选择器语法 选择器1~选择器2｛｝。实现的是选择器1后边的所有的选择器2 
		.box~p{}

3. 伪类选择器

1）动态伪类
		1.a:link{} 链接初始的样式，指的是a标签  权重是11
		2.a:visited{} 链接访问过后的样式 指的是a标签
		3.：hover｛｝ 鼠标悬停 可以是任何对象
		4.a：active｛｝ 链接按住不动的时候的样式
		5.input：focus｛｝ 选择获得焦点的输入字段后的样式
2）结构伪类
		A. -child结尾的    某个父元素下面的某个或者某些子元素变   5个
			：first-child{}
			：last-child{}
			：nth-child(){}     可以带参数，只能是n  n从0开始
					：nth-child(4){}     
					：nth-child(2n){}
					：nth-child(2n+1){}
					：nth-child(-n+8){}
			：nth-last-child(){}
			：only-child{}
		
		B. -type结尾的     同类型的某个或者某些变化      5个
			 ：first-of-type{}
			 ：last-of-type{}
			 ：nth-of-type(){}
			 ：nth-last-of-type(){}
			 ：only-of-type{}

		C. ：empty  当元素为空的时候变化

		D. ：root  根元素变化
3）否定伪类
		：not(否定的条件){}
4）ui状态伪类
	    A. ：disabled{}  禁用的时候
		B.：checked{}  选中的时候
		C. ：enabled{} 可用状态下的时候   
5）目标伪类
		 目标伪类   ：target{}		 
		 在静态页面里面  目标伪类必须和锚点一起用
6）语言伪类
		 :lang(){}  就是给不同的语言添加不同的符号去标注
		：lang()里面必须是语言的简写

4. 伪对象（伪元素）选择器

after before first-line first-letter selection

5. 属性选择器

1）[属性]
2）【属性=属性值】
3）[^属性=属性值]
4）[$属性=属性值]
5）[|属性=属性值]
6）[~属性=属性值]
7）[*属性=属性值]

Css可继承属性

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、 text- decoration 、text-transform。
块状元素可继承：text-indent和text-align    width
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。