HTML中两个表格使用不同的CSS1

发布网友发布时间：2023-11-24 17:25

共5个回答

热心网友时间：2024-10-30 12:19

你的样式这么定义就是全局的了。给个样式名称。

    /*第一行标题蓝色背景*/
    .mytable tr:first-child {
        background: #0066CC;
        color: #fff;
        font-weight: bold;
    }
    .mytable {
        border-top: 1pt solid #C1DAD7;
        border-left: 1pt solid #C1DAD7;
        margin: 0 auto;
    }
    .mytable td {
        padding: 5px 10px;
        text-align: center;
        border-right: 1pt solid #C1DAD7;
        border-bottom: 1pt solid #C1DAD7;
    }
    /* odd 标识奇数行，even标识偶数行 */
    .mytable tr:nth-of-type(odd) {
            background: #F5FAFA;
    }
    /*鼠标悬停后表格背景颜色*/
    .mytable tr:hover {
            background: #E0F0F0;
    }

追问还得请教，第一行的背景是蓝色
.mytable tr:first-child {
background: #0066CC;
color: #fff;
font-weight: bold;
实际没有显示出效果，您帮我看下，需要怎样修改，谢谢。

热心网友时间：2024-10-30 12:20

你定义的css使用的元素选择器是标签，要单独定义class, 然后在html中制定给相应的表。
比如
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

参考：
http://www.w3school.com.cn/css/css_syntax_class_selector.asp

热心网友时间：2024-10-30 12:20

给第一个table加一个class，例如class=“table”，然后样式都写在.table下就好了

热心网友时间：2024-10-30 12:21

.style1 tr:first-child {.......}
.style1 {......}
.style1 td{......}
.style1 tr:nth-of-type(odd){ ......}
.style1 tr:hover{......}

<table class='style1'>

热心网友时间：2024-10-30 12:21

表格的样式放在需要的里面，你全局的，肯定2个都有。