收藏
批改状态：合格
老师批语：你又把所有的伪类选择器复习了一遍, 如果你的样式表中用到了大量的伪类, 逼格是非常高的, 但可读性也降低了
圆角表格
<div id="table_wrap">
<table class="table" width="800" cellspacing="0" cellpadding="0">
<thead class="table_head">
<tr>
<th>头部1</th>
<th>头部2</th>
<th>头部3</th>
<th>头部4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1内容1</td>
<td>1内容2</td>
<td>1内容3</td>
<td>1内容4</td>
</tr>
<tr>
<td>2内容1</td>
<td>2内容2</td>
<td>2内容3</td>
<td>2内容4</td>
</tr>
<tr>
<td>3内容1</td>
<td>3内容2</td>
<td>3内容3</td>
<td>3内容4</td>
</tr>
</tbody>
</table>
<style>
#table_wrap > table{
font-size: 20px;
text-align: center;
margin: auto;
border-collapse: separate;+
}
#table_wrap > table >thead th{
border: 1px solid slategrey;
}
#table_wrap > table >tbody tr td{
border: 1px solid slategrey;
}
#table_wrap > table >thead th:first-of-type{
border-top-left-radius: 20px;
}
#table_wrap > table >thead th:last-of-type{
border-top-right-radius: 20px;
}
#table_wrap > table > tbody tr:last-child td:first-child{
border-bottom-left-radius: 20px;
}
#table_wrap > table >tbody tr:last-child td:last-of-type{
border-bottom-right-radius: 20px;
}
</style>
</div>效果图：
伪类选择器：
伪类选择器：
E:first-child { sRules } 匹配父元素的第一个子元素E。
E:last-child { sRules } 匹配父元素的最后一个子元素E。
E:only-child { sRules } 匹配父元素仅有的一个子元素E。
E:nth-child(n) { sRules } 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
E:nth-last-child(n) { sRules } 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type { sRules } 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type { sRules } 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E。
E:last-of-type { sRules } 匹配同类型中的最后一个同级兄弟元素E。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
