css选择器

body{
	background-color: beige;
}
/* 标签选择器 控制p元素标签内的内容*/
/* 元素标签一对多 */
p{
	color: #009AD6;
	font-size: 40px;
}
/* 控制h3元素标签内的内容 */
h3{
	color: #009AD6;
}
td{
	text-align: center;
}
/* 类选择器 */
/* 使用此类名的元素标签起效  多对多*/
.han_1{
	background-color: #009ad6;
	}
.bai_1{
	background-color: #f2f2f2;
}
.lu_1{
}

/* ID选择器 */
/* 一对一 */
#id_1{
	color: #009AD6;
}

属性值和属性选择器

/* 属性为lang会被选中 */
td[lang]{
	color: #009AD6;
}
/* title值为a的元素会被选中 */
td[title="a"]{
	color: #009AD6;
}
/* ~= 属性值包含c，且c前面只能有空格的td元素会被选择*/
td[title~="c"]{
	color: #009AD6;
}
/* 属性值为h开头，且h只能为独立单词，后面可跟连字符(-)的td元素会被选择 */
td[title|="h"]{
	color: #009AD6;
}

后代选择器
子元素选择器
相邻兄弟选择器

/* 后代选择器 */
/* 只会选择p标签内的em标签元素 */
h1 em{
	color: #009AD6;
}
/* p标签内的em子元素会被选择 */

p>em{
	color: #009AD6;
}
/* 相邻兄弟选择器 */
h1+p{
	color: deeppink;
}

为元素选择器

/* 向文本第一个字母添加样式 */
p:first-letter{
	color: #009AD6;
	font-size: xx-large;
}
/* 向第一行添加样式 */
p:first-line{
	color: #FF0000;
	font-variant: small-caps;
}
/* 向第一行添加样式 */
div:first-line{
	color: #FF1493;
	/* font-variant: small-caps; */
}
/* 在元素之后添加样式 */
h1:after{
	content: url(../img/0033033955287991_b.jpg );
}
/* 在元素之前添加样式 */
h1:before{
	content: url(../img/9619bd4b6f54160c5c81c6525f35f88b.jpeg);
}

为类选择器

/* 向未被激活的元素添加样式 */
a img:active{
/* font-size: 30px; */
width: 500px;
height: 500px;
}

/* 向拥有输入焦点的元素添加样式 */
input:focus{
	background-color: #009AD6;
}
/* 鼠标悬浮在上方的元素添加样式 */
input:hover{
	background: #009AD6;
}
/* 未被访问连接添加样式 */
a:link{
	font-size: 30px;
}
/* 已被访问连接添加样式 */
a:visited{
	color: red;
}
/* 向元素添加样式，且该元素是他的父元素的第一个子元素 */
a:first-child{
	font-size: 50px;
}
/* 向拥有lang属性的元素添加样式 */
a:lang{
	font-size: 50px;
}