CSS中id和class的引用

最新推荐文章于 2024-07-24 21:34:15 发布

sunny1996

最新推荐文章于 2024-07-24 21:34:15 发布

阅读量1w

点赞数 6

分类专栏： Web程序设计文章标签： html5 css

本文链接：https://blog.csdn.net/sunny1996/article/details/69049940

版权

Web程序设计专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天在学习过程中，遇到了class和id在css文件中的引用问题，被搞得很晕

如果想要指定在一个id里面的某一种元素，在CSS中应该用空格隔开，而不是像其他编程语言一样用“.”隔开，比如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fuck</title>
    <link rel="stylesheet" href="mycss.css" type="text/css">
</head>
<body>
    <table id="tb">
        <tr id="head">
            <th>姓名</th>
            <th>年龄</th>
            <th>学号</th>
        </tr>
        <tr>
            <td>老王</td>
            <td>20</td>
            <td>10011</td>
        </tr>
        <tr class="alt">
            <td>老王</td>
            <td>20</td>
            <td>10011</td>
        </tr>
        <tr>
            <td>老王</td>
            <td>20</td>
            <td>10011</td>
        </tr>
        <tr class="alt">
            <td>老王</td>
            <td>20</td>
            <td>10011</td>
        </tr>
    </table>

    <table id="tb2">
        <tr id="head2">
            <th>姓名</th>
            <th>年龄</th>
            <th>学号</th>
        </tr>
        <tr>
            <td>老王</td>
            <td>20</td>
            <td>10011</td>
        </tr>
        <tr class="alt">
            <td>老王</td>
            <td>20</td>
            <td>10011</td>
        </tr>
        <tr>
            <td>老王</td>
            <td>20</td>
            <td>10011</td>
        </tr>
        <tr class="alt">
            <td>老王</td>
            <td>20</td>
            <td>10011</td>
        </tr>
    </table>

</body>
</html>

mycss.css文件如下：

#tb{
    border-collapse: collapse;
    width: 500px;
}
#tb td,#tb th {
    border: 1px solid violet;
}
#head{
    color: white;
    background-color: grey;
}
#tb tr.alt td{
    background-color: aquamarine;
}

最终效果如下：

可以看到，只有上面这表格被更改了属性，因为底下那个表格的id是tb2,。

id必须是唯一的，而class是一个类，不一定是唯一的。

而如果我们将CSS文件中第二个项的#tb删除：

#tb{
    border-collapse: collapse;
    width: 500px;
}
td,th {
    border: 1px solid violet;
}
#head{
    color: white;
    background-color: grey;
}
#tb tr.alt td{
    background-color: aquamarine;
}

效果如下：

可以看到第二个表格的某些属性也跟着发生了变化。因为此时没有#tb的限定，只有td和th，默认就是所有的标签均被修改。