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: forms是用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;
}

或

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