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

相关文章

来自专栏前端说吧

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

1964
来自专栏一个爱瞎折腾的程序猿

自定义滚动条样式(layui.v1)

601
来自专栏python学习之旅

Python+Selenium笔记(六):元素定位

(一)  前言 Web应用以及包含超文本标记语言(HTML)、层叠样式表(CSS)、JS脚本的WEB页面,基于用户的操作(例如点击提交按钮),浏览器向WEB服务...

3478
来自专栏杂七杂八

HTML初学笔记1

[TOC] 什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) ...

3497
来自专栏程序猿的那些趣事

前端学习之CSS(二)

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览...

552
来自专栏PPV课数据科学社区

pyspider 爬虫教程 (1):HTML 和 CSS 选择

虽然以前写过 如何抓取WEB页面 和 如何从 WEB 页面中提取信息。但是感觉还是需要一篇 step by step 的教程,不然没有一个总体的认识。不过,没想...

3357
来自专栏云端架构

【云端架构】前端CSS实现单行、多行文本溢出显示省略号

如何实现单行文本的溢出显示省略号,同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

3435
来自专栏程序员八阿哥

开心学前端(一):HTML、CSS入门(1)1.1 html概述及html文档基本结构1.2 html标签入门

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语...

571
来自专栏算法channel

Python-GUI|Label显示图片,Pack布局控件

01 Label显示图片 Label显示文本很简单,直接在构造中将text显示地赋值。 如果Label显示成图片,如何设置? PhotoImage构造出图片,...

4546
来自专栏HTML5学堂

文本溢出-超出文本显示为省略号

HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作的时候,我们什么时候应该考虑内容撑开宽高,又应该在何时考虑...

2704

扫码关注云+社区