Question

由于评论我添加了.vmiddle, .vmiddle td, .vmiddle th在我的情况下不起作用，因为我正在使用bootstrap并且它使用vertical-align定义.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td：top;

优先。

我想执行这个css：

.vmiddle,
table.vmiddle thead tr td,
table.vmiddle tfoot tr td,
table.vmiddle tbody tr td,
table.vmiddle thead tr th,
table.vmiddle tfoot tr th,
table.vmiddle tbody tr th,
table thead.vmiddle tr td,
table tbody.vmiddle tr td,
table tfoot.vmiddle tr td,
table thead.vmiddle tr th,
table tbody.vmiddle tr th,
table tfoot.vmiddle tr th,
table thead tr.vmiddle td,
table tbody tr.vmiddle td,
table tfoot tr.vmiddle td,
table thead tr.vmiddle th,
table tbody tr.vmiddle th,
table tfoot tr.vmiddle th,
table thead tr td.vmiddle,
table thead tr th.vmiddle,
table tbody tr td.vmiddle,
table tbody tr th.vmiddle,
table tfoot tr td.vmiddle,
table tfoot tr th.vmiddle {
  vertical-align: middle;
}

不知怎的，我得到它来使用这个规则：

.vmiddle {
    vertical-align:middle;
    & {
        table& {
            & thead , tfoot, tbody {
                tr, {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        thead&, tbody&, tfoot& {
            table & {
                tr {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        tr& {
            thead &, tbody &, tfoot & {
                table & {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        td&, th& {
            tr & {
                thead &, tbody &, tfoot & {
                    table & {
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}

但看起来实际上比标准解决方案更复杂：D 有没有更短的方法来做到这一点而没有定义vertical-align：middle 5次？

Answer 1

看起来你没有使用'＆amp;'选择器正确。

来自lesscss.org：

＆amp;＆amp;组合器 - 当你想要一个嵌套选择器时使用它连接到其父选择器，而不是作为一个后裔。这对伪类来说尤为重要：悬停和：焦点。

例如：
.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}
将输出
.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

但在你的情况下看起来你甚至不需要使用它。

修改：

关于特异性问题（在下面的评论中提到），只需在根（表）元素上添加一个类，特殊性问题就会消失。所以，如果我们称之为calss .table：

LESS：

.table .vmiddle
{
   vertical-align: middle;
   td, th
   {
     vertical-align: middle;
   }
}

Answer 2

在大多数情况下，您应该能够缩短那些长css规则。在某些情况下，它不起作用，但通常你应该避免不必要的长选择器，以获得更好的性能和可读性。有条不紊地减少规则的一个例子：

任何thead，tbody，tfoot，tr，th和td都会在表格中，可以删除table选择器部分。

.vmiddle,
.vmiddle thead tr td,
.vmiddle tfoot tr td,
.vmiddle tbody tr td,
.vmiddle thead tr th,
.vmiddle tfoot tr th,
.vmiddle tbody tr th,
thead.vmiddle tr td,
tbody.vmiddle tr td,
tfoot.vmiddle tr td,
thead.vmiddle tr th,
tbody.vmiddle tr th,
tfoot.vmiddle tr th,
thead tr.vmiddle td,
tbody tr.vmiddle td,
tfoot tr.vmiddle td,
thead tr.vmiddle th,
tbody tr.vmiddle th,
tfoot tr.vmiddle th,
thead tr td.vmiddle,
thead tr th.vmiddle,
tbody tr td.vmiddle,
tbody tr th.vmiddle,
tfoot tr td.vmiddle,
tfoot tr th.vmiddle {
  vertical-align: middle;
}

任何tr，th和td将始终位于thead，tbody或tfoot，您可以删除那些。许多规则现在都是相同的，也删除它们。

.vmiddle,
.vmiddle tr td,
.vmiddle tr th,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle th,
tr.vmiddle th,
tr.vmiddle th,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle {
  vertical-align: middle;
}

任何th和td始终是tr的孩子，请移除tr。再次删除所有重复项。

.vmiddle,
.vmiddle td,
.vmiddle th,
td.vmiddle,
th.vmiddle {
  vertical-align: middle;
}

td.vmiddle和th.vmiddle已涵盖.vmiddle。

.vmiddle,
.vmiddle td,
.vmiddle th {
  vertical-align: middle;
}

较少的嵌套规则＆amp;

2 个答案: