Question

我将简单的样式应用于复杂的布局：

* {
  border: 1px solid #eaeaea;
}

它可以工作，但会导致所有类型的附加边框。有没有办法在全球范围内删除或折叠其他边界，因为我不知道（也不能）知道div或其他元素会触及什么？

是否有一个jQuery插件会对所有元素应用简单边框，并考虑到这一要求？

编辑：

我意识到明星是一张通配符，这是我所追求的效果，但我不希望边界加倍或加倍

当两个串联DIV的边界定义时 - 中心边框的宽度为2 - 我希望它实际重叠，因此它只渲染为1px而不是2 px。我不知道会有什么元素，所以手动应用样式或根据具体情况删除它们是不可接受的。

Answer 1

你可以这样做：

* {
    border: 1px solid #eaeaea;
}

.no-border {
    border: none;
}

然后，将班级no-border附加到不应有边框的所有元素上。

注意：

我认为默认情况下为所有元素设置边框并不是一个好主意，但这种技术可以为您提供所需的内容。

Answer 2

*表示全部，在您的css声明之后但在＆＃39;之前使用!important;＆＃39;

或将课程应用于您希望成为的元素，并且仍然包含＆＃39;！important＆＃39;

Answer 3

我猜你正在寻找避免元素并排有两个边界的总和，它们应该倒塌。

这是解决这个问题的一种方法。

＆＃13;

div {
  float: left;
  width: 33%;
  height: 100px;
  border: 1px solid black;
}

div.row1 ~ div.row1 {
  border-width: 1px 1px 1px 0;
}

div.row2 {
  border-width: 0 1px 1px 1px;
}

div.row2 ~ div.row2 {
  border-width: 0 1px 1px 0;
}

＆＃13;

<div class="row1"></div>
<div class="row1"></div>
<div class="row1"></div>
<div class="row2"></div>
<div class="row2"></div>
<div class="row2"></div>

＆＃13;

使用table

属性border-collapse: collapse本地支持折叠边框

＆＃13;

.table {
  display: table;
  border-collapse: collapse;
  width: 100%;
  height: 200px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid black;
}

＆＃13;

<div class="table">

  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

    <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

</div>

＆＃13;

第三种方法是使用负余量

＆＃13;

div {
  float: left;
  width: 33%;
  height: 100px;
  border: 1px solid black;
}

div.row1 ~ div.row1 {
  margin-left: -1px;
}

div.row2 {
  margin-top: -1px;
}

div.row2 ~ div.row2 {
  margin-left: -1px;
}

＆＃13;

<div class="row1"></div>
<div class="row1"></div>
<div class="row1"></div>
<div class="row2"></div>
<div class="row2"></div>
<div class="row2"></div>

＆＃13;

CSS边框重叠

编辑：

3 个答案:

注意：