Css 未应用于表类

标签 css css-selectors

我们有一个在 WordPress 中预定义的通用 table 元素。我想为表格元素定义一个类名,并让它使用自定义 css。

有谁知道我可能做错了什么?我们正在使用 CDN,我可以在缩小的 style.css 中看到 .cookie_table 类

    table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 1rem;
      border-radius: 0; }
      thead,
      tbody,
      tfoot {
        border: 1px solid #f1f1f1;
        background-color: #fefefe; }
      caption {
        padding: 0.5rem 0.625rem 0.625rem;
        font-weight: 700; }
      thead {
        background: #f8f8f8;
        color: #8E908F; }
      tfoot {
        background: #f1f1f1;
        color: #8E908F; }
      thead tr,
      tfoot tr {
        background: transparent; }
      thead th,
      thead td,
      tfoot th,
      tfoot td {
        padding: 0.5rem 0.625rem 0.625rem;
        font-weight: 700;
        text-align: left; }
      tbody th,
      tbody td {
        padding: 0.5rem 0.625rem 0.625rem; }
      tbody tr:nth-child(even) {
        border-bottom: 0;
        background-color: #f1f1f1; }
      table.unstriped tbody {
        background-color: #fefefe; }
        table.unstriped tbody tr {
          border-bottom: 0;
          border-bottom: 1px solid #f1f1f1;
          background-color: #fefefe; }

表类:

    .cookie_table {
        table {
            width: auto;
        }
    }

enter image description here

最佳答案

你的表有类 .cookie_table,所以选择器必须是 table.cookie_table { ... } 或者只是 .cookie_table { ... } 单独(不太具体),但不是 .cookie_table 作为 table 的 child ,就像在您的代码中一样(顺便说一句,如果您使用 LESS 或SASS)

关于Css 未应用于表类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57696123/

相关文章:

html - CSS下拉菜单: What is the fastest selector?

css - 单选按钮的 CSS 选择器 selenium 代码是什么?

html - 输入数字中的微调器隐藏在手机和平​​板电脑上

html - 背景视频高度和固定标题

当有两个 UL 时,CSS 以最后一个 UL 为目标

html - CSS Hover 属性显示非 div 元素

css - 仅将样式应用于具有特定类的嵌套 uls 中的最后一项

javascript - 将多个相似的 jQuery 函数转换为一个函数 - 动态

html - 包含隐藏的 "prepended"li 元素的列表

javascript - 将点击处理程序与 CSS 兄弟选择器组合时 IE 中的奇怪行为