CSS顯示麻煩

Question

得到了下面的CSS代碼：

#text input { 
width: 200px; 
} 

#contact-form input[type=text], #contact-form input[type=file], #contact-form select { 
width: 280px; 
height: 30px; 
} 

和HTML ...

<form id="contact-form" enctype="multipart/form-data" method="post" action=""> 
... 
<div id="text"> 
    <input type="text" name="x"> 
    <input type="text" name="y"> 

</div> 
... 
</form> 

我想這兩個領域，一個名爲X和Y從#text input CSS塊取寬度，但至少在Chrome中，使用了從#contact-form input開始的寬度。

PS：形式是動態與JS創建和元素的樣式看起來是這樣的：firstInput.style = "clear:none; margin:2px; width:200px";

Answer 1

你有幾個解決方案：

1.

#text input { 
width: 200px !important; 
} 

2.

#contact-form #text input { 
width: 200px; 
} 

3.change

#text input { 
width: 200px; 
} 

#contact-form input[type=text], #contact-form input[type=file], #contact-form select { 
width: 280px; 
height: 30px; 
} 

到

#contact-form input[type=text], #contact-form input[type=file], #contact-form select { 
width: 280px; 
height: 30px; 
} 

#text input { 
width: 200px; 
} 

這取決於你需要什麼。

Answer 2

寫：

#text input { 
    width: 200px !important; 
} 

OR

#contact-form #text input[type='text']{ 
    width: 200px; 
}