css - 有没有办法让这个 CSS 更简洁？

Question

下面的 CSS 似乎正在做我想要的。只是想知道它是否可以修剪并仍然做同样的事情。

.qr-setup {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:40%  ;}

.qr-setup table {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:80%  ;
}

.qr-setup table tr td {
  border: none;
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:80%  ;
}

Answer 1

你只需要这个：

.qr-setup {
    width:40%;
}

.qr-setup table, .qr-setup table tr td {
    width:80%;
}

.qr-setup table tr td {
    border: none;
}

.qr-setup, .qr-setup table, .qr-setup table tr td {
    text-align: center;
    margin-left: auto;
    margin-right: auto; 
}

您可以使用逗号重复列出所有内容的 css。

Answer 2

.qr-setup, .qr-setup table, .qr-setup tr td {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width: 80%;}

.qr-setup {
  width:40%  ;
}

.qr-setup table tr td {
 border: none;

}

Answer 3

甚至还有一个简写形式

margin-left: auto;
margin-right: auto;

即

margin:0 auto;

此代码将 margin-top 和 margin-bottom 设置为 0，将 margin-left 和 margin-right 设置为 auto。