请不要忘了,有一个值叫 inherit

请不要忘了,有一个值叫 inherit

下午在写组件的时候瞄了一眼qq群,看到有个哥们在问一道css的问题,他的问题如下图

红圈部分超出主体的部分,他是用伪元素写的,通过border和背景色,与最后一行的一个单元格融为一体。

但是表格是隔行换色的,如何让这个伪元素始终与这个单元格的背景色保持一致。

群里很热心,有人提供了js计算当前奇偶数的方法来赋值,有人提供js获取当前单元格背景色的方式赋值。

我悄悄问了一句,你为什么不继承哪?

background-color: inherit;

看来这个值被忽略的有点惨….

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>请不要忘了,有一个值叫 inherit</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test-table{
            border: #e5e5e5 1px solid;
            border-bottom: 0;
            width: 800px;
            margin: 50px auto;
        }
        .test-thead,.test-tbody{
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .test-tr{
            display: table-row;
            width: 100%;
        }
        .test-th,.test-td{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border-bottom: #e5e5e5 1px solid;
            position: relative;
        }
        .test-th{
            height: 120px;
            background-color: #edeef0;
            font-size: 24px;
        }
        .test-th:nth-child(2),.test-td:nth-child(2){
            border-left: #006eff 1px solid;
            border-right: #006eff 1px solid;
            width: 50%;
        }
        .test-th:nth-child(2){
            background-color: #e6f1fc;
            color: #2277da;
        }
        .test-th:nth-child(2):after{
            content: '';
            position: absolute;
            width: 100%;
            height: 15px;
            background-color: inherit;
            border: #006eff 1px solid;
            border-bottom: 0;
            top: -15px;
            left: -1px;
        }
        .test-td{
            height: 40px;
            padding: 10px 0;
            background-color: #fff;
        }
        .test-tr:nth-child(2n+0) .test-td:nth-child(2){
            background-color: #f7f8fa;
        }
        .test-tr:last-child .test-td:nth-child(2):after{
            content: '';
            position: absolute;
            width: 100%;
            height: 15px;
            background-color: inherit;
            border: #006eff 1px solid;
            border-top: 0;
            bottom: -15px;
            left: -1px;
        }
        .test-td p{
            line-height: 1.8;
        }
    </style>
</head>
<body>
<div class="test-table">
    <div class="test-thead">
        <div class="test-tr">
            <div class="test-th">表头</div>
            <div class="test-th c-contrast-actived">表头</div>
            <div class="test-th">表头</div>
        </div>
    </div>
    <div class="test-tbody">
        <div class="test-tr">
            <div class="test-td">
                <p>内容</p>
            </div>
            <div class="test-td ">
                <p>内容</p>
            </div>
            <div class="test-td">
                <p>内容</p>
            </div>
        </div>
        <div class="test-tr">
            <div class="test-td">
                <p>内容</p>
            </div>
            <div class="test-td ">
                <p>内容</p>
            </div>
            <div class="test-td">
                <p>内容</p>
            </div>
        </div>
        <div class="test-tr">
            <div class="test-td">
                <p>内容</p>
            </div>
            <div class="test-td ">
                <p>内容</p>
            </div>
            <div class="test-td">
                <p>内容</p>
            </div>
        </div>
        <div class="test-tr">
            <div class="test-td">
                <p>内容</p>
            </div>
            <div class="test-td ">
                <p>内容</p>
            </div>
            <div class="test-td">
                <p>内容</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iKcamp

追溯 React Hot Loader 的实现

文:萝卜(沪江金融前端开发工程师) 本文原创,转载请注明作者及出处 如果你使用 React ,你可以在各个工程里面看到 Dan Abramov 的身影。他于...

44814
来自专栏前端说吧

JS案例 - 基于vue的移动端长按手势

当时首先想到要做长按事件的时候,我想到的是vue内部的自定义指令,毕竟官网里边有这么一句描述:

1442
来自专栏更流畅、简洁的软件开发方式

【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

2968
来自专栏IMWeb前端团队

iconfont关于content值的坑

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

19910
来自专栏進无尽的文章

UI篇-自定义控件中关于父试图中的键盘遮挡问题

我们平时在设计页面的时候,考虑到MVC的设计模式会出现很多层的试图分离,这里面就不可以避免的出现自定的控件。 我在一次自定义控件中出现了以下问题,记录在案以供...

551
来自专栏编程

React 深度编程:受控组件与非受控组件

作者:司徒正美 https://segmentfault.com/a/1190000012458996 受控组件与非受控组件在官网与国内网上的资料都不多,有些人...

2437
来自专栏编程直播室

WebGL 动画

1624
来自专栏hightopo

原 基于 HTML5 WebGL 的 3D

2416
来自专栏企鹅号快讯

坚定地使用 CSS Custom Properties

好久没译文,最近看到这篇 Getting Hardboiled with CSS Custom Properties。觉得不错,翻译出来给大家。现在 CSS 新...

1907
来自专栏程序猿

用 Python 向你比个心

之前写了一篇用 Python 画一个小猪佩奇和哆啦 A 梦,然后最近看到有人用 turtle 画了一个心,觉得挺有意思的,于是把代码复制到本地,再加了个播放音乐...

1995

扫码关注云+社区