我可以在Less中使用帶＆字符的css通配符選擇器嗎？

我爲CSS使用less，並擁有此代碼。該顯著的是，我要降下來字形glyphicon 4個像素：我可以在Less中使用帶＆字符的css通配符選擇器嗎？

.glyphicon { 
    font-size: 20px; 
    padding: 0; 
    &.glyphicon-chevron-down { 
     top: 4px; 
    } 
}

我也想降低了 glyphicons，我想使用一個CSS選擇通配符。像這樣的東西（這個代碼不起作用）：

.glyphicon { 
    font-size: 20px; 
    padding: 0; 
    &[class^="glyphicon-chevron-"] { 
     top: 4px; 
    } 
}

我可以這樣做嗎？

來源

2016-04-27 user3827510

你可以這樣做嗎？爲什麼不去[嘗試]（http://less2css.org/#%7B%22less%22%3A%22.glyphicon%20%7B%5Cn%20%20%20%20font-size%3A%2020px%圖3B％5CN％20％20％20％20padding％3A％200％3B％5CN％20％20％20％20％26.glyphicon-字形向下％20％7B％5CN％20％20％20％20％ 20％20％20％20top％3A％204px％3B％5CN％20％20％20％20％7D％5CN％20％20％20％20％26％5Bclass％5E％3D％5C％22glyphicon-chevron- ％5C％22％5D％20％7B％5CN％20％20％20％20％20％20％20％20top％3A％204px％3B％5CN％20％20％20％20％7D％5CN％7D ％22％7D）？（你唯一的錯誤是無與倫比的額外'}'）。 –

儘管double類似乎被減少了（它真的可以是'.not-glyphicon.glyphicon-chevron-down'嗎？所以我認爲''glyphicon-chevron- *'不應該嵌套）。 –

我曾嘗試過（感謝您捕捉語法錯誤 - 這是在我簡化的SO問題中，但不是我的代碼） – user3827510

它不起作用，因爲我假設，實際的類字符串並不真正以glyphicon-chevron-開頭，而是以glyphicon glyphicon-chevron-開頭。

我會嘗試

.glyphicon { 
    font-size: 20px; 
    padding: 0; 
    color: green; 
    &[class^="glyphicon glyphicon-chevron-"] { 
    color: red !important; 
    } 
}

或者，使用其中[attr*=value]通配符「代表與ATTR的屬性名的元素和值中包含字符串至少出現一次‘價值’爲子。」

https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

.glyphicon { 
    font-size: 20px; 
    padding: 0; 
    color: green; 
    &[class*="glyphicon-chevron-"] { 
    color: red !important; 
    } 
}

編輯：這也並不需要在所有嵌套，屬性選擇將只是工作。但是我明白，出於某種原因，您可能希望更具體，或者出於某種原因將代碼保存在一起。如果你只是改變了類字符串的順序，你的原始代碼也可以工作（除了不匹配的花括號）

來源

2016-04-27 18:35:29 hidanielle

我可以在Less中使用帶＆字符的css通配符選擇器嗎？

回答

相關問題