CSS 选择器

基本选择器

基本选择器	解释
Id选择器	#选择器(id的属性值)
Class选择器(类选择器)	.选择器(class的属性值)
标签选择器	标签名作为选择器
*(通配符选择器)	匹配所有

层级选择器

层级选择器	解释
组合选择器	div,p
包含选择器	div.p
父子选择器	div>p
兄弟选择器	div~p
紧贴在div后的p标签	div+p

属性选择器

1. 匹配input标签中属性为name的采用此样式
	input[name]{
		color:red
	}
2. 匹配input标签中name属性的值是以u开头采用此样式
	input[name^=u]{
		color:red
	}
3. 匹配input标签中name属性的值是以u结束采用此样式
	input[name$=u]{
		color:red
	}
4.  匹配input标签中type属性的值中包含a采用此样式
	input[name*=a]{
		color:red
	}
5. 匹配input标签中type属性的值为password采用此样式
	input[type=password]{
		color:red
	}

伪元素选择器

1. div标签中第一行内容采用此样式
	div:first-line{
		color:pink;
	}
2.  div标签中第一个字母采用此样式
	div:first-letter{
		color:pink;
	}
3. 只作用于块状元素
	p:first-letter{
		color:pink;
	}
4. 在div标签之前添加此内容+样式
	div:before{
		content:"啦啦啦";
	}
5. 在div标签之后添加此内容+样式
	div:after{
		content:"啦啦啦";
	}

结构性伪类选择器

1. ul的第一个儿子li采用此样式
	ul li:first-child{
		color:yellow;
	}
2. ul的最后一个儿子li采用此样式
	ul li:lastt-child{
		color:yellow;
	}
3. ol唯一的一个儿子li采用此样式
	ol li:only-child{
		color:yellow;
	}
4. ul的第三个儿子li采用此样式
	ul li:nth-child(3){
		border:1px solid red;
	}
5. ul的第奇数个儿子采用此样式 [正序]
	ul li:nth-child(odd){
		color:yellow;
	}
6. ul的第偶数个儿子采用此样式 [正序]
	ul li:nth-child(even){
		color:yellow;
	}