css - 有没有更短的方法来查找课程

Question

我想知道是否有更短的方法来实现这种 css 选择器：

.post.quote, .post.photo, .post.video {
...
}

Answer 1

是的，但不是直接通过 CSS： -例如，SASS ( http://sass-lang.com/ ) 允许您执行以下操作：

.user.post{
    margin-top:10px;
    .photo{}
    .video{}
}

变成

.user.post{margin-top:10px;}
.user.post .photo{}
.user.post .video{}

或者如果你只能使用 js，那就更少（http://lesscss.org/）：

.bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
      color:blue;
      font-weight:bold;
      margin-left:20px;
    }

.post, .video {
  .child, .sibling {
      .parent & { color: black; }
      & & { .bordered; }
  }
}

变成

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  color: blue;
  font-weight: bold;
  margin-left: 20px;
}
.parent .post .child,
.parent .video .child,
.parent .post .sibling,
.parent .video .sibling {
  color: black;
}
.post .child .post .child,
.post .child .video .child,
.post .child .post .sibling,
.post .child .video .sibling,
.video .child .post .child,
.video .child .video .child,
.video .child .post .sibling,
.video .child .video .sibling,
.post .sibling .post .child,
.post .sibling .video .child,
.post .sibling .post .sibling,
.post .sibling .video .sibling,
.video .sibling .post .child,
.video .sibling .video .child,
.video .sibling .post .sibling,
.video .sibling .video .sibling {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  color: blue;
  font-weight: bold;
  margin-left: 20px;
}

Answer 2

如果类photo、、video和quote只会出现在下面post，也许您可​​以考虑重新排列样式以使其更具体post。然后只是：

.photo, .video, .quote { /*...*/ }

应该有同样的效果。