幹起來的CSS - 多個父母給一個孩子

Question

我有幾個層次結構，分別列在下面，其中第一個選擇器是父div，第二個是div內的圖像項。但是，我可以將這些結合起來嗎？

.outdoors .how-to-image { 
    cursor: pointer; 
} 

.snowsports .how-to-image { 
    cursor: pointer; 
} 

.stripe .how-to-image { 
    cursor: pointer; 
} 

.twilio .how-to-image { 
    cursor: pointer; 
} 

.rental_requests .how-to-image { 
    cursor: pointer; 
} 

Answer 1

如果父元素並不重要，那麼你可以簡單地使用：

.how-to-image { 
    cursor: pointer; 
} 

否則，你將不得不選擇器結合起來。最簡單的形式是：

.outdoors .how-to-image, 
.snowsports .how-to-image, 
.stripe .how-to-image, 
.twilio .how-to-image, 
.rental_requests .how-to-image { 
    cursor: pointer; 
} 

---

除此之外，沒有其他的方式來簡化它。即使您使用LESS，也會輸出相同的內容。

.outdoors, .snowsports, .stripe, .twilio, .rental_requests { 
    .how-to-image { 
    cursor: pointer; 
    } 
} 

輸出：

.outdoors .how-to-image, 
.snowsports .how-to-image, 
.stripe .how-to-image, 
.twilio .how-to-image, 
.rental_requests .how-to-image { 
    cursor: pointer; 
} 

Answer 2

當然，你可以通過用逗號分隔組合選擇：

.outdoors .how-to-image, .snowsports .how-to-image, .stripe .how-to-image, .twilio .how-to-image, .rental_requests .how-to-image { 
    cursor: pointer; 
} 

並根據HTML層次，你甚至可以進一步縮小範圍。