CSS優先級規則沒有正確應用於輸入框的寬度

我遇到了輸入框的CSS優先級問題。寬度爲96%正在應用，同時根據優先規則應用寬度auto。如果我申請!important，我想要的樣式應用。然而，這不是我想解決問題的方式。CSS優先級規則沒有正確應用於輸入框的寬度

我有一個輸入框這樣

<fieldset> 
    <label>Search</label> 
    <input type="text" class="standard-size"> <!-- Referring to this --> 
</fieldset>

實現，並由這兩個CSS聲明的影響：

fieldset input[type=text] { 
     width: 96%; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     border: 1px solid #BBBBBB; 
     height: 20px; 
     color: #666666; 
     -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     padding-left: 10px; 
     background-position: 10px 6px; 
     margin: 0; 
     display: block; 
     float: left; 
     margin: 0 10px; 
} 

.standard-size { 
    width: auto ; 
}

根據此鏈接： http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

優先工程這種方式（內嵌樣式，ID，類，元素）。左邊的數字在右邊的任何數字之前。

在我的情況：字段集輸入[類型=文本]轉化爲（0,0,0,2），因爲字段集和輸入2個元件 AND 。標準尺寸轉換爲（0,0,1， 0），因爲.standard-size是一個CSS類

（0,0,1,0）應該優先於（0,0,0,2），因爲1只是比2更靠左而且這使得它更重要。那爲什麼96％的寬度接管？

謝謝

來源

2014-01-07 prince

你忘了算[type=text]屬性選擇，這相當於一個類選擇（在文章中也提到您鏈接到）：

fieldset input[type=text] /* 1 attribute, 2 types -> specificity = (0, 0, 1, 2) */ 
.standard-size   /* 1 class    -> specificity = (0, 0, 1, 0) */

雖然屬性選擇和類選擇器是等價的，它是你的第一條規則中的兩個類型選擇器，它會超過第二個。

來源

2014-01-07 13:49:28 BoltClock

因爲[type=text]是一個屬性，它添加（0,0,1,0）（source）。所以你的第一套規則實際上具有特異性（0,0,1,2），它大於（0,0,1,0）。

來源

2014-01-07 13:51:00 kmoe

CSS優先級規則沒有正確應用於輸入框的寬度

回答

相關問題