请不要忘了，有一个值叫 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>提示：你可以先修改部分代码再运行。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读