个人中心
gpt4 book ai didi

html - 上下文类不能覆盖表头颜色类 (.thead-dark/.thead-light)

转载 作者：行者123 更新时间：2023-11-28 00:48:29 24 4
gpt4 key购买 nike

我正在研究 Bootstrap 4 中的表格。我不知道为什么不应用台灯类中的背景颜色。这是因为台灯无法覆盖暗灯吗？如果是真的，你能告诉我是什么让 thead-dark 优先于此吗？如果不是我想的，请为我解释背后的原因。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
	<title>Table</title>
</head>
<body>
<div class="container">
  <h2>Contextual Classes</h2>
  <p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th class="table-light">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
</body> <!-- source: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp -->

问题:

enter image description here

最佳答案

这就是.thead-light在 Bootstrap stylesheet 中定义.

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

你看到它的目标是th元素是具有 thead-light 的元素的后代类。

因此，当您将该类应用于 th 时元素，就像你在 

<th class="table-light">Firstname</th>

你需要定位

th.thead-light {
   /* CSS */
}

否则.table-dark > th的特异性将覆盖 <th class="table-light"> 的那个

.table-dark,
.table-dark > th, /* <<< This rule */
.table-dark > td {
  background-color: #c6c8ca;
}

关于html - 上下文类不能覆盖表头颜色类 (.thead-dark/.thead-light)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48854687/

24 4 0
文章推荐： html - 之前使用 CSS 水平扩展 元素的 border-top
文章推荐： javascript - 将 Summernote 与 Meteor 结合使用(发现 Meteor)
文章推荐： javascript - 如何使用 Meteor 从 API 导入 http 请求(JSON 格式)
文章推荐： php - 在 php 7.1 中通过 session 发送页面名称是一种好习惯吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com