來自不同樣式表文件的CSS選擇器優先級

Question

我有一個帶有輸入和textarea元素的表單。我使用bootstrap和我自己的site.css。 site.css位於標記中的boostrap.css之前。我在網站的CSS，看起來像這樣的CSS規則：

.formcontainer input, textarea { 
    background-color: lightgray; 
} 

表單元素也有形式控制類從應用到他們的引導。問題在於輸入元素會優先考慮我網站css中的規則並正確應用背景顏色。但是，對於textarea元素，引導類優先於來自我的site.css的規則。所有表單元素都被包裝在同一個div容器中，並且應用了相同的分解。我無法理解爲什麼元素獲得不同規則的優先順序。

這裏就是輸入得到的背景顏色標記的一個例子，但textarea的不：

<div id="formpart2" class="formcontainer"> 
    <div class="form-group"> 
     <label class="control-label visible-ie8 visible-ie9">Email</label> 
     <div class="input-group"> 
      <input type="text" class="form-control invalid" fieldrequired> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label visible-ie8 visible-ie9">Contact Instructions</label> 
     <div class="input-group"> 
      <textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea> 
     </div> 
    </div> 
</div> 

Answer 1

在引導，你可能會發現，開始像這樣的規則：

.formcontainer input, 
.formcontainer textarea { 
    /* whatever */ 
} 

在您嘗試覆蓋，你忘了textarea的背景：

.formcontainer input, 
textarea { 
    background-color: lightgray; 
} 

這使得你的textarea規則不如Bootstraps的規則特殊，所以即使你以正確的順序加載css文件，你的textarea風格也不會覆蓋Bootstrap的textarea風格（假設你在.formcontainer的上下文中）。

我強烈建議你多瞭解一下CSS specificity。 非常有用如果你想使用CSS，

Answer 2

的的site.css是在標記的boostrap.css之前。

這是你的問題。 CSS的工作方式，稍後出現的規則（無論是在一張表中還是在多張表中）都會覆蓋出現在他們面前的規則。切換您的標記，使您的自定義樣式最後 - 即，包括bootstrap.css之前site.css。

（另外，請記住，textarea是一個非常通用的選擇你的意思.formcontainer textarea？）

Answer 3

css引擎總是優先於.class和#id而不是tag-name。您的風格的問題是，您正在使用標籤名稱textarea，其類別爲form-control。所以，css引擎將優先於tag-name優先.form-control。請參閱以下示例。

無法工作

.formcontainer input, 
 
textarea { 
 
    background-color: lightgray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="formpart2" class="formcontainer"> 
 
    <div class="form-group"> 
 
    <label class="control-label visible-ie8 visible-ie9">Email</label> 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control invalid" fieldrequired> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label visible-ie8 visible-ie9">Contact Instructions</label> 
 
    <div class="input-group"> 
 
     <textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea> 
 
    </div> 
 
    </div> 
 
</div>

工作原理

input.form-control, 
 
textarea.form-control { 
 
    background-color: lightgray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="formpart2" class="formcontainer"> 
 
    <div class="form-group"> 
 
    <label class="control-label visible-ie8 visible-ie9">Email</label> 
 
    <div class="input-group"> 
 
     <input type="text" class="form-control invalid" fieldrequired> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label visible-ie8 visible-ie9">Contact Instructions</label> 
 
    <div class="input-group"> 
 
     <textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea> 
 
    </div> 
 
    </div> 
 
</div>

希望這有助於！