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

写：

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

OR

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

Answer 2

你的解决方案很少：

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;
}

这取决于你需要什么。

CSS显示麻烦

2 个答案: