----
选择器的类型：
1 标签选择器：
权重：1；
想要选中那一类标签，就把标签名字写出来，就一个花括号，就会对这一类的标签起作用：
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
2 通配符选择器：
权重 1；
用符号 *
*{
margin:0;padding:0;
}
3 类选择器：
权重：10
给谁起名字：就在谁的开始标签里写上 class="name"; 在样式中进行选取的时候，是用符号 .+name
例子：
<style> .box{ background-color: lightgreen; } </style> <body> <p class="box">p1</p> <p class="box">p2</p> <p class="box">p3</p> <p>p4</p> <p>p5</p> <p>p6</p> </body>
4 属性选择器：
权重： 10；
想要让具备特定属性的一类元素起作用，我们在选取的时候，用符号 [属性]+{}
想要让具备特定属性，并且属性值一样的一类元素起作用，选取的时候，[属性值]+{}
<style>
[index]{
background-color:lightsteelblue;
}
[index="a1"]{
background:red;
}
</style>
<body>
<p index="a1">p1</p>
<p index="a1" >p2</p>
<p index="b1" >p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
5 id选择器
权重：100；
用法：给谁起名字，就给那个标签里面写 "id=name" 在选取的时候，用符号“#name+{}”
注意：一个页面中，ID的名字不能相同
例子：
<style> #p4{ background-color:mediumaquamarine; } </style> <p id="p4">p4</p>
6 子选择器：
权重：所组成的选择器之和：
通俗的说：就是。‘儿子选择器’，连接符 ">" 例如 ： ul >li{} 代表的就是选中ul下面的所有儿子元素 li;
注意：只向下查找。
.box>h1{
background:red;
}
div>h1{
background:green;
}
<div class="box">
<p>p1</p>
<span>span</span>
<h1>h1</h1>
<h1>h1</h1>
<h1>h1</h1>
</div>
<h1>h1</h1>
7 后代选择器：
权重：选择器组合之和：
子子孙孙，只要是后代，都符合。
例子：
<style> .box p{ background:mediumaquamarine; } </style> <body> <div class="box"> <p>p1</p> <div> <p>p2</p> </div> </div> <p>p3</p> </body>
8 分组选择器：
权重：选择器之和：
把具有相同样式的元素，可以提取出来，然后使用“，” 隔开，那么他们的样式会共享的。
连接符：，
例子：
h1,p{
text-align:center;
height:30px;
line-height: 30px;
background:green;
}
9 交集选择器：
权重：选择器之和
把同时具有多个名字的元素，就能选中，比如下面的代码，同时选中的就是 h1 和 div ;
.red.current{
font-size:28px;
color:gold;
}
<h1 class="red current" >h1</h1>
<p class="red">p</p>
<div class="red current">div</div>
10 相邻兄弟选择器：
权重：所有选择器之和：
h1+p{} 这个代表的意思，就是先去找h1 标签， 接下来h1 标签的兄弟元素，并且紧邻着 h1 标签的必须是 p 标签才符合规则
只能向下。
连接符：+
<style>
h1+p{
background:lightgreen;
}
</style>
<h1>h1</h1>
<p>p</p>
<p>p</p>
<h1>h1</h1>
<div>div</div>
<p>p</p>
11 通用兄弟选择器：
权重：所有选择器之和
h1~p{}代表的意思，就是h1 元素下面的所有的P标签。
连字符 ～
<style>
h1~p{
background:lightgreen;
}
</style>
<p>p</p> // 这个选不中
<p>p</p> // 这个选不中
<h1>h1</h1>
<p>p</p>
<p>p</p>
<h1>h1</h1>
<div>div</div>
<p>p</p>
12 伪类选择器：
有一定的顺序，遵守，，但是只要记住 a:hover() 就可以了，其它几种不常用，存在兼容性问题。
<style>
/* 默认的a标签的文字颜色 */
a:link{
color:red;
}
/* 访问过后的文字颜色 */
a:visited{
color:blue;
}
/* 鼠标滑上的文字颜色 */
a:hover{
color:gold;
}
/* 点击的时候文字颜色 */
a:active{
color:navajowhite;
}
</style>
13
1 完整的表格：包括：thead, tbody, tfoot,表示没一行用 tr 单元格用 td
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='keywords' content='关键词'>
<meta name='description' content='描述的文字'>
<title>table</title>
</head>
<body>
<table border="1">
<caption>成绩表：</caption>
<thead>
<tr>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计：</td>
<td>合计：</td>
<td>合计：</td>
</tr>
</tfoot>
</table>
</body>
</html>
12 table 简写形式的：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='keywords' content='关键词'>
<meta name='description' content='描述的文字'>
<title>table的合并行：rowspan</title>
<style>
table{
width:500px;
height:300px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
<tr>
<td rowspan="2">100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table> </body> </html>
15 table的几个常用属性：
边框：border="1"
单元格内填充 cellpadding="10px" (内容与边框线之间的距离)
单元格与单元格之间的间距，cellspacing="20px"
合并行：rowspan
合并列：colspan