css选择器
1.通用选择器：“*”；
2.元素选择器
3.id选择器：前面加一个#号 一个元素只能有一个id，多个元素可以共用一个类，一个元素可以应用两个类
4.类选择器：前面加符号.
①给一个元素加上多个类名
②指定某一特定的类
5.属性选择器
E[att]：选择具有att属性的E元素。需要选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
例如：
input[value]{background:green;}
可以根据多个属性进行选择，只需将属性选择器链接在一起即可
例如：
input[style][value]{background:green;}
E[att="val"]：选择具有att属性且属性值等于val的E元素。进一步缩小选择范围，（只选择有特定属性值的元素。）
例如：
input[value="vip2"]{background:red;}
E[att~="val"]：选择具有att属性且属性值有多个，其中一个的值等于val的E元素。
例如：
input[style~='15px']{background:red;}//我试了不管用
E[att|="val"]：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
例如：
p[lang|='en']{color:red;}
css3新增：
E[att`="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。
例如：
input[value^="vip"]{color:green;}
a[href^="http"]{color:green;}
E[att$="val"]： 选择具有att属性且属性值为以val结尾的字符串的E元素。
例如：
a[href$="cn"]{color:red;}
E[att*="val"]：选择具有att属性值且属性值包含val的字符串的E元素。
例如：
a[href*="xxx"]{color:yellow;}
test1:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Test1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</style>
</head>
<body>
<input type="text" value="住址" style="padding:10px 20px 30px"><br><br>
<input type="text" value="姓名" style="padding:15px 25px 35px"><br><br>
<input type="tel"><br><br>
<input type="button" value="vip2"><br><br>
<input type="button" value="vip3"><br><br>
<input type="button" value="vip4"><br><br>
<a href="http://www.baidu.com">百度</a><br><br>
<a href="http://www.xxx.cn">xxx</a><br><br>
<p lang="en-us">HTML5</p>
</body>
</html>
style.css：
/*input[style][value]{background:green;}*/
/*input[value="vip2"]{background:red;}*/
input[style~='15px']{background:red;}
p[lang|='en']{color:red;}
input[value^="vip"]{color:green;}
a[href^="http"]{color:green;}
a[href$="cn"]{color:red;}
a[href*="xxx"]{color:yellow;}
6.关系选择器
后代选择器（包含选择器）ul li{}:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
例如：
ul li{color:red;border:1px solid;}
div p{color:green;}
子元素选择器ul>li：与后代选择器相比，子元素选择器只能选择作为元素子元素的元素，缩小了选择范围。
例如：
ul>li{border:1px solid;color:red;}
相邻选择符：E+F:选择紧贴在E元素之后F元素。
例如：
h2+p{color:green;}
CSS3新增：
兄弟选择器E~F：选择E元素所有兄弟元素F。（只可以选择到之后的元素）
例如：
h2~p{color:green;}
test2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style2.css" type="text/css">
</head>
<body>
<ul>
<li>我是ul的子元素1
<ol>
<li>我是ul的孙元素1</li>
<li>我是ul的孙元素2</li>
<li>我是ul的孙元素3</li>
<li>我是ul的孙元素4</li>
<li>我是ul的孙元素5</li>
</ol>
</li>
<li>我是ul的子元素2</li>
<li>我是ul的子元素3</li>
<li>我是ul的子元素4</li>
</ul><hr>
<div>
<h2>我是标题1</h2>
<p>我是段落p1</p>
<p>我是段落p2</p>
<p>我是段落p3</p>
<p>我是段落p4</p>
<h3>我是标题2</h3>
<p>我是段落p5</p>
<p>我是段落p6</p>
<p>我是段落p7</p>
<p>我是段落p8</p>
</div>
</body>
</html>
style2.css:
/*ul li{color:red;border:1px solid;}*/
/*div p{color:green;}*/
/*ul>li{border:1px solid;color:red;}*/
/*h2+p{color:green;}*/
h2~p{color:green;}
div,ul{color:red;}//并列关系
