如何定位物品

Question

我目前有一个主样式表，但是使用该表的多个页面，我不想制作多个样式表，因为我使用PHP来表达它。如何定位特定元素，如文本区域，如：

<div id="regform" class="
<label>Password:</label>
<input name="Password" placeholder="Password"></input>

但是css是：

input
{
height:100px;
width: 500px;
padding: 10px;
}

一切都很精细！它创建了我想要的外观，但是它会将所有文本区域更改为那样，而这不是我想要的，我只希望该div中的文本区域看起来像那样，因为我使用了很多文本区域。

要点：

如何仅在一个div中更改textareas和元素的外观？所以它不会影响任何其他文本区域。

这是一个编辑！这不起作用请看这个！ http://jsfiddle.net/wbyQL/1/

Answer 1

HTML

<div id="regform" class="x-div">
    <label>Password:</label>
    <input name="Password" placeholder="Password"></input>
</div>

CSS

.x-div input {
    height:100px;
    width: 500px;
    padding: 10px;
}

Answer 2

使用选择器。根据您是否喜欢THAT div或带有文本输入的任何div来将css应用于它们：

HTML：

<div id="regform" class="
<label>Password:</label>
<input name="Password" placeholder="Password"></input>

CSS：

#regform input
{
height:100px;
width: 500px;
padding: 10px;
}

如果您希望css适用于任何input中的div，而不仅仅是div input { height:100px; width: 500px; padding: 10px; } ：

#bar div .foo {
 //css stuff
} 

我建议您阅读CSS选择器。

{{1}}

基本上这意味着：找到一个带有“foo”类的元素，它位于div的某个地方，其中div位于id =“bar”的元素内;

Answer 3

HTML：

<div id="regform" class="">
<label>Password:</label>
<input name="Password" placeholder="Password"></input>
</div>

CSS：

#regform input
{
height:100px;
width: 500px;
padding: 10px;
}

http://jsfiddle.net/wbyQL/3/