css - 如何定位项目

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 中更改文本区域和元素的外观？所以它不会影响任何其他文本区域。

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

使用选择器。取决于您是否希望该 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于 ANYdiv而不仅仅是那个：

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

我建议阅读 CSS 选择器。

#bar div .foo {
 //css stuff
}

基本上这意味着：找到一个类为“foo”的元素，该元素位于 div 内部的某个位置，该 div 位于 id =“bar”的元素内部的某个位置；

score 0 · Accepted Answer

HTML：

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

CSS：

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

3 回答 3