2020-02-10（表格以及结构选择器）

表格

1. 表格的基本组成

<table>  表格
<caption></caption> 表格标题
<thead> 表格头部
<tr> 行
<th></th> 列
<th></th> 列
</tr>
</thead>
<tbody> 表格主体
<tr> 行
<th></th> 列
<th></th> 列
</tr>
</tbody>
<tfoot> 表格底部
<tr> 行
<th></th> 列
<th></th> 列
</tr>
</tfoot>
</table>

注意！在< thead >里面的列标签是< th >
在< tbody>里面可以是< td>

2. 嵌套规则
   表格相关的内容要写在table下
   table的子级有：

• caption 表格标题
• thead 表格头部
• tbody 表格主体
• tfoot 表格底部

thead的子级有：

• tr 行
• th 列 （只有在thead下面的列，才是th）
• tbody的子级有：
• tr 行
• td 列
• tfoot的子级有：
• tr 行
• td 列

thead 和 tfoot都不是必须的
不写tbody，系统会自动解析为tbody

3. 表格样式
   table（类似block）

display: table;

caption

display: table-caption;

thead

display: table-header-group;

tr

display: table-row;

th

display: table-cell; 垂直居中有用

tbody

display: table-row-group;

tfoot

display: table-footer-group;

需要清除的样式
th，td

padding: 0;

table

border-collapse: collapse;

标签样式：

<table border="1" cellspacing="20" cellpadding="50"></table>

不常用

• border 边框粗细
• cellspacing 单元格margin
• cellpadding 单元格padding

样式表样式：

border-spacing: 20px;

单元格margin，相当于 cellspacing

border-collapse: collapse;

单元格合并

• separate 分离，默认值
• collapse 边框合并为单一边框，忽略border-spacing

vertical-align: bottom;

• 控制单元格内垂直对齐方式，默认为垂直居中

操作单元格合并

<td rowspan="2">下午</td>
<td colspan="7">1</td>

• rowspan 行合并
• colspan 列合并

4. 表格使用的特性：

• 修改其中一个单元格的宽度会影响整列的宽度
• 修改其中一个单元个的宽度会影响整行的高度
  5.结构选择器
  结构伪类选择器
  • nth-child 一般般，比较少

p:nth-child(3){}

p标签父级下的，正数第3个子级如果是p标签，则添加样式

p:nth-last-child(3){}

p标签父级下的，倒数第3个子级如果是p标签，则添加样式

p:first-child{}

p标签父级下的，正数第1个子级如果是p标签，则添加样式

p:last-child{}

p标签父级下的，倒数第1个子级如果是p标签，则添加样式

• nth-of-type 非常多

p:nth-of-type(3){}

找到p标签父级下的，正数第3个为p标签的子级，添加样式

p:nth-last-of-type(3){}

找到p标签父级下的，倒数第3个为p标签的子级，添加样式

p:first-of-type{}

找到p标签父级下的，正数第1个为p标签的子级，添加样式

p:last-of-type{}

找到p标签父级下的，倒数第1个为p标签的子级，添加样式

• empty

body *:empty{}

找到body下的空标签，添加样式

• only-child不常用

body *:only-child{}

找到body下，标签中只有一个子级的元素

● not一般般

body *:not(.p){}

选中body下所有的标签，除了class为.p的

• 结构选择器 这三个都常用
  "~ "毗邻元素选择器

  p~h3{}

选中class为.p的元素后所有的同级h3标签

• " + "相邻选择器

p+h3

选中p标签的下一个兄弟节点，如果为h3，则添加样式

• “>” 子元素选择器

ul > li{}

选择当前ul下的li，该li是直接子级（而不是子级里面的子级）

针对文本类型 这三个不常用

p:first-letter{}

选中第一个文字

p:first-line{}

选中第一行位置

p::selection{}

被选中时候的样式

:target 选择器 不常用

#div1:target{}

该选择器必须结合锚点，当url地址和id命名一致时，添加该样式