HTML+CSS要点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 和 tfoot都不是必须的
• 不写tbody，系统会自动解析为tbody

表格样式

标签样式：

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

样式表样式：

1. border-spacing 单元格margin，相当于 cellspacing
2. border-collapse
   1. separate 分离，默认值
   2. collapse 边框合并为单一边框，忽略border-spacing

操作单元格合并：

• rowspan 行合并
• colspan 列合并

2 结构选择器

2.1 结构伪类选择器

1）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标签，则添加样式

特点：
如果p前面有非p标签，那么会计算这个标签但是并不对这个标签起作用

括号内可以填入的内容：

• number 指定第几个元素
• odd（奇数） / even（偶数）
• 数列（n）2n/2n-1, 4n

2）nth-of-type 常用

1. p:nth-of-type(3){}
   找到p标签父级下的，正数第3个的p标签，添加样式
2. p:nth-last-of-type(3){}
   找到p标签父级下的，倒数第3个的p标签，添加样式
3. p:first-of-type{}
   找到p标签父级下的，正数第1个的p标签，添加样式
4. p:last-of-type{}
   找到p标签父级下的，倒数第1个的p标签，添加样式

特点
不计入未选中的标签：如果p标签前面有其他标签，则会直接跳过这个标签

3）其他不常用结构伪类选择器

• empty 不常用
  body *:empty{}
  找到body下的空标签，添加样式

• only-child 不常用
  body *:only-child{}
  找到body下，标签中只有一个子级的元素

• not 不常用
  body *:not(.p){}
  选中body下所有的标签，除了class为.p的

2.2 结构选择器

1. ~ 毗邻元素选择器
   .p~h3{} 选中class为.p的元素后所有的同级h3标签
2. +相邻选择器
   .p~h3{} 选中p标签的下一个兄弟节点，如果为h3，则添加样式
3. > 子元素选择器

2.3 针对文本类型

1. p:first-letter{}
   选中第一个文字
2. p:first-line{}
   选中第一行位置
3. p::selection{}
   被选中时候的样式

2.4 :target 选择器

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