有没有找到类

Question

，如果有一个较短的方式来实现这种CSS选择器我想知道一个较短的方式：

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

Answer 1

如果类photo，video，并quote仅会出现post下，也许你可以考虑重新安排的样式成为post更具体。然后只是：

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

应该有同样的效果。

Answer 2

是的，但不是直接通过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，那里有LESS（ 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; 
}