用於多個元素的最短可能選擇器

我想爲多個選擇器應用一個CSS規則。像這樣：用於多個元素的最短可能選擇器

.btn-group.pull-right.with_space .btn + .btn, .btn-group.pull-right.with_space i + i{ 
    margin-left: 10px; 
}

現在我的問題是，如果有一個更短的方法來做到這一點。（因爲這兩個選擇器的父元素是相同的，而且不同的只在最後一個子元素中）。

來源

2015-11-04 Shimon Brandsdorfer

不除非你想使用SASS，LESS或其他一些CSS預處理器。編輯：或者，爲您定位的元素添加一個通用類。 – Quantastical

你可以檢查任何一個類是否足夠獨特，那麼你可以只寫（with_space .btn + .btn，.with_space i + i'）。和/或，如果它始終是容器中的第二個孩子，則「.btn-group.pull-right.with_space：n-child（2）'。我同意@Quantastical，但是，在兒童中使用課堂會更好。 –

爲了擴大對我的評論，如果您選擇使用一個CSS預處理器，如SASS或LESS，你可以做嵌套的選擇，就像這樣：

/* SASS example */ 
.btn-group.pull-right.with_space { 
    i + i, .btn + .btn { 
    /* ... */ 
    } 
}

編譯後，生成的CSS會類似於你已經寫過的東西。

有時，向共享樣式的元素添加通用類可能會更好。所以，在你.btn + .btn和i + i元素，添加一個類，如btn_and_i，這樣你就可以用一個選擇他們的目標：

/* CSS example */ 
.btn_and_i { 
    /* ... */ 
}

如果你一意孤行，使這個「最短」選擇可能，然後向目標元素添加單字符類，如"a"。

.a { 
    /* ... */ 
}

來源

2015-11-04 19:49:42 Quantastical

用於多個元素的最短可能選擇器

回答

相關問題