css语法和选择器

4. css语法
	* 格式：
		选择器{
			属性名1：属性值1；
			属性名2：属性值2；
			...
		}
	* 选择器：筛选具有相似特征的元素
	* 注意：
		* 每一对属性需要使用；隔开，最后一对属性可以不加；

5. 选择器：筛选具有相似特征的元素
	* 分类：
		1. 基础选择器
			1. id选择器：选择器具体的id属性值的元素.建议在一个html页面中id值唯一
				* 语法： #id属性值{}
				* 注意： id选择器的优先级最高
			2. 元素选择器：选择具有相同标签名称的元素
				* 语法：标签名称{}
				* 注意：id选择器优先级高于元素选择器
			3. 类选择器：选择具有相同的class属性值的元素。
				* 语法：.class属性值{}
				* 注意： 类选择器的优先级高于元素选择器
		2. 扩展选择器
			1. 选择所有元素：
				* 语法：* {}
			2. 并集选择器
				* 选择器1，选择器2{}
			3. 子选择器：筛选选择器1元素下的选择器2元素
				* 语法： 选择器1 选择器2{}
			4. 父选择器：筛选选择器2的父元素选择器1
				* 语法：选择器1>选择器2{}
			5. 属性选择器：选择元素名称，属性名=属性值的元素
				* 语法：元素名称[属性名="属性值"]{}
				* 一般用于input类型的标签
			6. 伪类选择器：选择一些元素具有的状态
				* 语法：元素：状态{}
				* 如：<a>
					* 状态：
						* link:初始化的状态
						* visited:被访问过的状态
						* active:正在访问状态
						* hover:鼠标悬浮状态

6. 属性

p{
	color: red;
	font-size:30px;

}
<p>呵呵</p>

<style type="text/css">
	#div1{
		color: red;
	}

	div{
		color: green;
	}

	.cls1{
		color: blue;
	}
</style>

<div id="div1">传智播客</div>
<div class="cls1">黑马程序员</div>

<p class="cls1">传智学院</p>

<!--子选择器-->
<style type="text/css">
	div p{
		color: red;
	}
</style>

<div>
	<p>传智播客</p>
</div>
<p>黑马程序员</p>

<!--父选择器-->
<style type="text/css">
	div > p{
		boder: 1px solid;
	}
</style>

<div>
	<p>传智播客</p>
</div>
<p>黑马程序员</p>
<div>aaa</div>

<!--属性选择器-->
input[type='text']{
	border: 5px solid;
}
<input type="text" >
<input type="password" >


a:link{
	color:pink;
}

a:hover{
	color:green;
}

a:active{
	color:yellow;
}

a:visited{
	color:red;
}

<br>
<a href="#">传智播客</a>

<br>
<a href="#">黑马程序员</a>
<br>