请不要忘了,有一个值叫 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 条评论
登录 后参与评论

相关文章

来自专栏月色的自留地

在Mac上使用vs-code快速上手c语言学习(入门文,老鸟退散)

3064
来自专栏恰同学骚年

ASP.Net MVC开发基础学习笔记:一、走向MVC模式

  在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/blog/index.aspx的URL,那么我们的WebFo...

823
来自专栏java工会

SpringMvc支持跨域访问,Spring跨域访问@CrossOrigin

跨域,即跨站HTTP请求(Cross-site HTTP request),指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求。

851
来自专栏IMWeb前端团队

响应式设计

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 开始 可以看一个响应式demo 一个强大的网站,可有...

19410
来自专栏jessetalks

ASP.NET Core集成现有系统认证

我们现在大多数转向ASP.NET Core来使用开发的团队,应该都不是从0开始搭建系统,而是老的业务系统已经在运行,ASP.NET Core用来开发新模块。那么...

3619
来自专栏cloudskyme

20个代码生成框架

1.1 CodeSmith 一款人气很旺国外的基于模板的dotnet代码生成器 官方网站:http://www.codesmithtools.com 官方论坛:...

6664
来自专栏何俊林

今日力推: Android 厨客APP / Android 趣刻App

一、Android——CookMan 厨客APP 简介 CookMan,厨客,是一款查询、搜索、分类、收藏菜谱功能的APP。 数据来源 Mob API APP ...

2015
来自专栏雨过天晴

原 MariaDB编译安装

1465
来自专栏hrscy

怎样在 Unity 中创建 UI

在现在每一个软件应用中,用户界面(UI)都是核心的特征。游戏也没有抛弃这一规则。有非常多的游戏都使用 UI 来显示一些信息,比如生命值,技能,地图,武器的弹药,...

1072
来自专栏Python中文社区

一个实现批量抓取淘女郎写真图片的爬虫

淘女郎,也被很多人称作“网络模特”,就是专门给淘宝、天猫等线上商家拍摄图片的平面模特。 ? ? 我们将用Python3和Selenium Webdriver抓...

2036

扫码关注云+社区