Question

我在这里创建了JSFiddle：https://jsfiddle.net/fpqwruyd/

HTML：

<body>

<table style="width:100%">
  <tr>
    <td colspan=1>Jill</td>
    <td colspan=2>Smith</td>        
  </tr>
  <tr>
    <td colspan=1>Eve</td>
    <td colspan=2>Jackson</td>      
  </tr>
  <tr>
    <td colspan=1>John</td>
    <td colspan=1>Doe</td>

    <td colspan=1>
           <input type="text"></input>
    </td>

</tr>
</table>

</body>

的CSS：

input[type=text] {
    width: 100% ;

    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;

    min-height:35px;

    padding: 0px !important;
    margin: 0px !important;
    border-color: white !important;
    border: 0px !important;

}

我想在html中对输入文本应用不同的CSS。现有输入[type = text]应该应用于我的html中的其他输入文本（未显示）。我怎样才能做到这一点？我定义了一个新类，但它没有被应用。提前谢谢。

Answer 1

试试这个input[type="text"]{}或者如果它失败，请在你的样式中使用！important来尝试。

Answer 2

您可以查看http://www.w3schools.com/css/css_attribute_selectors.asp

查看我创建的这个JSFiddle：https://jsfiddle.net/sks9bo5u/1/

它演示了一些将类与TYPE属性组合在一起以选择不同元素的场景。

<body>
    <input type="text" class="red" value="This is RED"></input><p>
    <input type="text" class="blue" value="This is NOT Blue"></input><p>
    <input type="text" class="green" value="This is GREEN"</input><p>
    <br>
    <input type="button" class="red" value="This is NOT RED" /><p>
    <input type="button" class="blue" value="This is BLUE" /><p>
    <input type="button" class="green" value="This is ALSO GREEN" /><p>
</body>

.red[type=text]
{
    /* This class turns input tags of ONLY type "text" RED */
    border:1px red solid;
    color:red;
}

.blue[type=button]
{
    /* This class turns input tags of ONLY type "button" BLUE */
    border:1px blue solid;
    color:blue;
}

.green
{
    /* This class turns any input type GREEN */
    border:1px green solid;
    color:green;
}

将不同的CSS应用于输入文本

2 个答案: