如何阻止标头中的 css 格式化 html 中的其他对象

很抱歉问这个基本问题，因为我是这些语言的新手，我真的不知道如何解决这个问题：

代码如下：

<html>
  <head>
    <style>
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
    width: 100%;
}
</style>
    </head>
  
  <body>
    <!--This is the object that should in't want it to be affected-->
    <div><FORM  method="post">
<table border="2" bgcolor="white" align="RIGHT"cell spacin="1">
<TR><th colspan="2"	>Login</th></tr>
<tr><td>Username</td><td> <INPUT TYPE="TEXT" NAME="USERNAME" required ></td></tr>
<tr><td>Password</td><td><input type="PASSWORD" maxlength="20" name="PASSWORD"></td></tr>
<tr><td colspan="2" ><pre><input type="submit" value="login" NAME="SUBMIT" >             <a href="reg.php">Create Account</a></td></pre>
</div>
</table><div>
</form>
      <!--This is the object should be affected-->
  <form>
  <input  type="text" name="search" placeholder="Search..">
  </form>

我面临的问题是当我运行代码时，由于 CSS 样式，表的行用户名很大，我想内联 CSS 命令并这样做

<form style="input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
    width: 100%;
}">
  <input  type="text" name="search" placeholder="Search..">
  </form>

现在，当我再次运行代码时，我得到没有应用CSS的搜索框，我认为我在内联部分做错了 - 任何指针或帮助将不胜感激。

您可以为仅适用于表中文本框的 css 类添加更大的特异性。像这样简单的事情：

<html>
  <head>
    <style>
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
/*THE TEXTBOXES INSIDE YOUR TABLE*/
table input[type=text],table input[type=password] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 11px;
    background-color: white;
    padding: 2px 2px 2px 2px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
    width: 100%;
}
</style>
    </head>
  
  <body>
    <!--This is the object that should in't want it to be affected-->
    <div><FORM  method="post">
<table border="2" bgcolor="white" align="RIGHT"cell spacin="1">
<TR><th colspan="2"	>Login</th></tr>
<tr><td>Username</td><td> <INPUT TYPE="TEXT" NAME="USERNAME" required ></td></tr>
<tr><td>Password</td><td><input type="PASSWORD" maxlength="20" name="PASSWORD"></td></tr>
<tr><td colspan="2" ><pre><input type="submit" value="login" NAME="SUBMIT" >             <a href="reg.php">Create Account</a></td></pre>
</div>
</table><div>
</form>
      <!--This is the object should be affected-->
  <form>
  <input  type="text" name="search" placeholder="Search..">
  </form>
  
    
 Run code snip

如果我正确理解了您的问题，最简单的解决方法是使用您的原始代码并进行少量修改。与其使用像 input[type=text] 这样令人困惑的选择器，不如创建一个类或一个 id，并将其附加到您想要样式化的输入。在下面的代码中，将原始选择器替换为类search-input，并将该类应用于有问题的表单元素。

<html>
  <head>
    <style>
.search-input {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.search-input:focus {
    width: 100%;
}
</style>
    </head>
  
  <body>
    <!--This is the object that should in't want it to be affected-->
    <div><FORM  method="post">
<table border="2" bgcolor="white" align="RIGHT"cell spacin="1">
<TR><th colspan="2"	>Login</th></tr>
<tr><td>Username</td><td> <INPUT TYPE="TEXT" NAME="USERNAME" required ></td></tr>
<tr><td>Password</td><td><input type="PASSWORD" maxlength="20" name="PASSWORD"></td></tr>
<tr><td colspan="2" ><pre><input type="submit" value="login" NAME="SUBMIT" >             <a href="reg.php">Create Account</a></td></pre>
</div>
</table><div>
</form>
      <!--This is the object should be affected-->
  <form>
  <input class = "search-input" type="text" name="search" placeholder="Search..">
  </form>

相关内容

最新更新

热门标签：