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下，也许您可以考虑重新排列样式以更具体{{1} }}。然后就是：

post

应具有相同的效果。

是否有更短的方法来查找课程

2 个答案: