CSS重復，有什么更有效的方法？

Question

如何更有效地編寫此代碼？ 我不想每次都寫.btn:hover 。

 .btn:hover .glyphicon-minus, .btn:hover .glyphicon-ok, .btn:hover .glyphicon-remove, .btn:hover .glyphicon-trash, .btn:hover .glyphicon-arrow-left, .btn:hover .glyphicon-arrow-right, .btn:hover .glyphicon-eye-open, .btn:hover .glyphicon-floppy-disk, .btn:hover .glyphicon-print .btn:hover .glyphicon-pencil{ color: black !important; } 

Answer 1

.btn:hover [class*='glyphicon-'] {...}

...匹配.btn:hover所有子元素，它們的class屬性中包含glyphicon- 。 如果它們始終是直系子代，則應使用直接后代運算符：

.btn:hover > [class*='glyphicon-'] {...}

...因此，當.glyphicon-*不是.btn直接子代時， .btn 。

---

注意： （@Paulie_D）原則上，對於一般情況，這比使用[class^="glyphicon-"]更安全，因為當匹配的子項有多個類且被匹配的子項不是第一個時，則選擇器不匹配。 例如：

<a class="btn"><i class="glyphicon glyphicon-floppy-disk"></i>Old devices</a>

---

注意： （@ GeomanYabes，關於使用SASS的建議）。 使用（或不使用）SASS通常與您工作的團隊/公司的堆棧有關，與開發人員的個人選擇或項目/客戶的要求有關，而不是在特定項目的特定情況下（例如，上面的一個）。 我的意思是如果你有像這樣的情況，你不會選擇使用SASS，如果沒有，那就放棄它 。 該決定基於更大的考慮，並且無論如何都要做出。 根據經驗，我告訴所有人 ：如果您編寫CSS， 請使用SASS 。 回到您的建議和問題，請注意，SASS生成了CSS，而CSS不一定更高效 ，這是OP似乎有意要求的，無論是否有意。
在效率方面，例如渲染速度和瀏覽器性能，我必須說我真的不確定兩者之間哪個代碼更有效（指定每種情況或一個模式）。 我假設解析器上的模式應該更重一些，而且額外的權重可能無法證明較短語法所保存的字符是合理的。
無論如何，差異是如此之小，以至於在99.99％的情況下，它們都不重要。 無論如何，如果您決定追求這個問題，那么我對任何結果/測試都非常感興趣。 可以說，我選擇將CSS看作是一種業余愛好，而不是一份工作，這與我最近對JavaScript的看法相反。
如果以鍵入的字符來衡量效率，我猜該模式會勝出。 如果以花費在編碼上的時間來衡量，它會因人而異，並且與知識有關的多於語法。

Answer 2

嘗試：

.btn:hover [class^="glyphicon-"]

定位以glyphicon- 開頭的所有類

克拉符號。 在正則表達式中最常使用它來指定字符串的開頭。

^{您必須記住的30個CSS選擇器}

Answer 3

您可以為此使用LESS或SASS。 它允許您將類/標簽/ ID和其他選擇器相互嵌套。 這樣你可以寫

.btn:hover {
  .glyphicon-minus,
  .glyphicon-ok,
  .glyphicon-remove,
  .glyphicon-trash,
  .glyphicon-arrow-left,
  .glyphicon-arrow-right,
  .glyphicon-eye-open,
  .glyphicon-floppy-disk,
  .glyphicon-print,
  .glyphicon-pencil {
    color: black !important;
  }
}

Answer 4

如果您不需要選擇要影響哪些字形，建議CSS正則表達式的答案肯定會解決您的問題。

如果您需要具體說明，不幸的是CSS的局限性就此停止了，您應該考慮研究像Sass這樣的預處理器或像PostCSS這樣的后處理程序，以幫助縮短編碼時間。

.btn:hover {
     .glyphicon {
        &-minus,
        &-ok,
        &-remove,
        &-trash,
        &-arrow-left,
        &-arrow-right,
        &-eye-open,
        &-floppy-disk,
        &-print
        &-pencil {
            color: black !important;
        }
    }
}

如果您使用的是Sass，則會提供相同的輸出。

Answer 5

嘗試.btn:hover:matches(.glyphicon-minus, .glyphicon-ok, .glyphicon-remove, .glyphicon-trash, .glyphicon-arrow-left, .glyphicon-arrow-right, .glyphicon-eye-open, .glyphicon-floppy-disk, .glyphicon-print .glyphicon-pencil) {/*your css*/}