可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

When I was trying to add some input fields with css

I got a problem

I couldn't make more than one css for some input fields

this is the fields I have

<input type="text" name="firstName" />
<input type="text" name="lastName" />

and the css is

input
{
   background-image:url('images/fieldBG.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:235px;
}

I want to make the first field (firstName) with this css

input
{
   background-image:url('images/fieldBG.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:235px;
}

and the second one (lastName) with this css

input
{
   background-image:url('images/fieldBG2222.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:125px;
}

help please :-)

回答1:

Use the ID selector.

CSS:

input{
    background-repeat:repeat-x;
    border: 0px solid;
    height:25px;
    width:125px;
}

#firstname{
    background-image:url('images/fieldBG.gif');
}
#lastname{
    background-image:url('images/fieldBG2222.gif');
}

HTML:

<input type="text" ID="firstname" name="firstName" />    
<input type="text" ID="lastname" name="lastName" />

All your inputs will be styled with the generic input style, and the two special ones will have the styling specified by the ID selector.

回答2:

You can style by type or name the form elements using CSS.

input[type=text] {
    //styling
}
input[name=html_name] {
    //styling
}

回答3:

You have to change your HTML file:

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

...to:

<input type="text" id="FName" name="firstName" />
<input type="text" id="LName" name="lastName" />

And modify your CSS file to:

input {
    background-repeat:repeat-x;
    border: 0px solid; 
    height:25px; 
    width:125px;
}


#FName {
    background-image:url('images/fieldBG.gif');
}


#LName {
    background-image:url('images/fieldBG2222.gif');
}

Best of Luck!

回答4:

Add an 'id' tag to each of your inputs:

<input type="text" id="firstName" name="firstName" />
<input type="text" id="lastName" name="lastName" />

then you can use the #selector in CSS to grab each one.

input {
  background-repeat:repeat-x; 
  border: 0px solid;
  height:25px;
}

#firstName {
  background-image:url('images/fieldBG.gif');
  width:235px;
}

#lastName {
  background-image:url('images/fieldBG2222.gif');
  width:125px;
}

回答5:

Use Classes to style. they are a better solution. using classes you can style each input type individually.

<html>
    <head>
        <style>
            .classnamehere {
                //Styling;
            }
        </style>
    </head>

    <body>
        <input class="classnamehere" type="text" name="firstName" />
    </body>
</html>