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
样式表样式:
- border-spacing 单元格margin,相当于 cellspacing
- border-collapse
- separate 分离,默认值
- 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 常用
- 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标签,添加样式
特点
不计入未选中的标签:如果p标签前面有其他标签,则会直接跳过这个标签
3)其他不常用结构伪类选择器
-
empty 不常用
body *:empty{}
找到body下的空标签,添加样式 -
only-child 不常用
body *:only-child{}
找到body下,标签中只有一个子级的元素 -
not 不常用
body *:not(.p){}
选中body下所有的标签,除了class为.p的
2.2 结构选择器
- ~ 毗邻元素选择器
.p~h3{} 选中class为.p的元素后所有的同级h3标签 - +相邻选择器
.p~h3{} 选中p标签的下一个兄弟节点,如果为h3,则添加样式 - > 子元素选择器
2.3 针对文本类型
- p:first-letter{}
选中第一个文字 - p:first-line{}
选中第一行位置 - p::selection{}
被选中时候的样式
2.4 :target 选择器
#div1:target{}
该选择器必须结合锚点,当url地址和id命名一致时,添加该样式