Question

我试图在我的页脚的每个h4标题下面有一个下划线，它有4列。我想出了以下css，它部分完成了我的目标。

.views-col.col-1 h4{
text-decoration: none;
border-bottom: 4px solid green;
width: 40%;
}
.views-col.col-2 h4{
text-decoration: none;
border-bottom: 4px solid green;
width: 50%;
}
.views-col.col-3 h4{
text-decoration: none;
border-bottom: 4px solid green;
width: 50%;
}
.views-col.col-4 h4{
text-decoration: none;
border-bottom: 4px solid green;
width: 50%;
}

但是我需要在我的Css代码中重复这4次。这可以简化为适合1规则吗？另外还有一种更好的方法在每个标题下都有下划线。

非常感谢

Answer 1

还有一个解决方案：

.views-col[class*="col-"] h4 {
    text-decoration: none;
    border-bottom: 4px solid green;
    width: 50%;
}

Answer 2

在您的情况下，我们可以轻松地将其简化为两个区块。

.views-col h4 {
  text-decoration: none;
  border-bottom: 4px solid green;
  width: 50%;
}

.views-col .col-1 h4 {
  width: 40%;
}

Css边框底宽

2 个答案: