我不能在CSS3

Question

通配符的工作，我有這個網站：

<div> 
    <input class="orderrow-1" type="text"></input> 
    <input class="orderrow-2" type="text"></input> 
</div> 

這個CSS：

input[class^='orderrow-'] 
{ 
    border: 1px solid #e2e2e2; 
    color: #333; 
    font-size: 1em; 
    margin: 5px 5px 6px 0px; 
    padding: 5px; 
    width: 100px; 
    text-align: right; 
} 

我嘗試風格與「orderrow開頭的類中的所有輸入字段 - '但以上不起作用。有什麼建議麼？

編輯：對不起，上面確實有效。問題是我有兩個賭注。像這樣：

<div> 
    <input class="trigger orderrow-1" type="text"></input> 
    <input class="trigger orderrow-2" type="text"></input> 
</div> 

當orderrow-1之前有某些東西時選擇器不工作。想法？

Answer 1

問題是，您使用的前綴匹配^=這意味着它將匹配類屬性的值（其中包括所有類名稱），其開頭orderrow-它觸發orderrow-2類屬性的實際值如果你需要一個通配符選擇器，規範建議這樣做：*=它會查找一個包含任意點字符串的值。

例如：

input[class ^="orderrow-"], input[class *=" orderrow-"] 
{ 
    border: 1px solid #e2e2e2; 
    color: #333; 
    font-size: 1em; 
    margin: 5px 5px 6px 0px; 
    padding: 5px; 
    width: 100px; 
    text-align: right; 
} 

input.orderrow-1 { 
    border: 1px solid #F00; 
} 

需要注意的是，因爲屬性選擇器以及經典的選擇具有相同的特殊性，你應該把overribe 以下屬性，確保樣式適當cascadence *（根據這一點很重要我的例子 - jsfiddle）。

編輯：根據評論使用更精確的選擇器的例子。

docs請參閱三種不同通配符選擇器的文檔。

*我有時彌補的話，但只要你明白我的意思......

Answer 2

應該沒事看看我這裏各種CSS3僞類http://codepen.io/jamiepaterson/pen/cADfs

的代碼滲透測試你想要的就是這個測試中的紫色文字顏色。