笔记整理--练习结构伪类--表格案例

在本案例中用到的结构伪类有：

• :nth-child(n),该选择器用于匹配属于其父元素的第 N 个子元素，不论元素的类型,n 可以是数字、关键词或公式。
• :nth-of-type(n),该选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,n 可以是数字、关键词或公式。

CSS代码：

@charset "UTF-8";
body{font-family: "微软雅黑";}
a{ text-decoration: none;}
table{
     800px;
    border:  none;
    border-collapse: collapse;/*合并边框*/
    margin:100px auto;
    text-align: center;/*使单元格内容居中对齐*/
}
 /* <caption></caption> 表格标题 */
caption{
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}
td {
    height: 45px; 
}
tr:nth-child(1){
    font-weight: 700;
}
/* 设置2n+1（奇数）个tr作为子元素的背景色，:nth-of-type()只计算同类型元素个数 */
tr:nth-of-type(2n+1){
     background-color: #FFFFCC;
}
/* 设置2n（偶数）个tr作为子元素的背景色 */
tr:nth-of-type(2n){
  background-color: #f0f0f0;
}
/* 选择td 的第一个子元素strong 设置样式 */
td strong:nth-child(1){
    color:#333;
    font-size: 14px;
} 
/* 选择td 的第三个子元素span 设置样式 */
td span:nth-child(3){
    color:#999;
    font-size: 12px;
} 
/* 选择第n+2行的tr,第2列的td,设置样式  */
tr:nth-child(n+2) td:nth-child(2){
    font-size: 14px;
}
tr:nth-child(n+2) td:nth-child(3){
    font-size: 14px;
}
tr:nth-child(n+2) td:nth-child(4){
   color: red;
   font-size: 14px;
}
/* 设置 a标签的样式 */
table tr td a{
    display: inline-block;
     80px;
    height: 25px;
    line-height: 25px;
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    background-color: red;
}

HTML代码：

<table >
        <!-- <caption></caption> 表格标题 -->
        <caption>影院电影放映列表</caption>
        
        <tr >
            <td >放映时间</td>
            <td>语言版本</td>
            <td>放映厅</td>
            <td>售价(元)</td>
            <td>选座购票</td>
        </tr>
        <tr>
            <td><strong>13:15</strong> <br/><span >15:00散场</span></td>
            <td>国语3D</td>
            <td>2号厅</td>
            <td>￥32.5</td>
            <td><a href="#" onclick="return false;">选座购票</a></td>
        </tr>
        <tr>
            <td><strong>13:15</strong> <br/><span >15:00散场</span></td>
            <td>国语3D</td>
            <td>5号厅</td>
            <td>￥32.5</td>
            <td><a href="#" onclick="return false;" >选座购票</a></td>
        </tr>
        <tr>
            <td><strong>17:15</strong> <br/><span >19:00散场</span></td>
            <td>国语3D</td>
            <td>4号厅</td>
            <td>￥32.5</td>
            <td><a href="#" onclick="return false;" >选座购票</a></td>
        </tr>
        <tr>
            <td><strong>17:15</strong> <br/><span >21:00散场</span></td>
            <td>国语3D</td>
            <td>1号厅</td>
            <td>￥32.5</td>
            <td><a href="#" onclick="return false;">选座购票</a></td>
        </tr>
        <tr>
            <td><strong>19:15</strong> <br/><span >21:00散场</span></td>
            <td>国语3D</td>
            <td>6号厅</td>
            <td>￥32.5</td>
            <td><a href="#" onclick="return false;">选座购票</a></td>
        </tr>
    </table>

效果：