CSS 样式表的令人沮丧的行为答案

【问题标题】：frustrating behavior with CSS stylesheetsCSS 样式表的令人沮丧的行为
【发布时间】：2012-08-14 11:28:05
【问题描述】：

我有一个压力很大的问题。我应用了一个名为 input 的 div 类来为我的用户名/密码字段上的框设置样式，如下图所示。

但是现在我想对搜索栏应用不同的样式，但无论我做什么，即使我使用内联样式表，它也会使用旧输入元素的样式。我几乎尝试了所有方法。

登录html

<div class="form">  

<form name="form1" method="POST" action="login.php">
<div class="input">
  <input name="username" id="username" placeholder="Username">

  <input name="password" id="password" placeholder="Password">
  </div>

  <input type="submit" name="Submit" value="Login" class="submit">


</form>
</div>

搜索栏html

<div class="ajax-div">

    <div class="searchbar">

     <input type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content">

    </div>

    <div id="box"></div>
</div>

最后一个宽度：输入中的参数指示页面上所有输入栏的宽度。

.form {

    margin-top:-182px;
    margin-left:1100px;
    position:static;
    width: 220px;
    height:150px;
    padding: 20px;
    padding-top:10px;
    border: 1px solid #270644;

  background:url(bg-right.png);

}


.label {
        font-size: 12px;
        font-family: arial, sans-serif;
        list-style-type: none;
        color: #999;
        text-shadow: #000 1px 1px;
        margin-bottom: 10px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: block;
    }   




input {
      /* input boxes*/
      -webkit-transition-property: -webkit-box-shadow, background;
      -webkit-transition-duration: 0.25s;
        padding: 6px;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        border-top: 1px solid #666;
        -moz-box-shadow: 0px 0px 2px #000;
        -webkit-box-shadow: 0px 0px 2px #000;
        margin-bottom: 10px;
        background: #FFF;
        width: 130px;

    }

我尝试应用到搜索栏的 css：

searchbar {

left: 350px;
top:100px;
width: 300px;

}

【问题讨论】：

是我还是你的 CSS 中的searchbar 应该是.searchbar？

标签： html css

【解决方案1】：

您的 CSS 选择器错误。

而不是这个：

searchbar {

left: 350px;
top:100px;
width: 300px;

}

试试这个：

.searchbar #text_content {

left: 350px;
top:100px;
width: 300px;

}

“点”表示您要定位类名。 “哈希”表示您要定位特定 ID。 CSS 的名字有一个线索；级联样式表。样式从通用到更具体的“涓涓细流”。因此，如果您只想定位一个元素，那么 ID 是一种可行的方法……它通常会覆盖元素上的任何通用样式。

祝你好运！

【讨论】：

所以添加一个“.”并做 .searchbar 输入，表示我正在定位类输入并用搜索栏中提供的元素覆盖它？
目前在你的 HTML 中你有这个：
通过 CSS 定位这个标签你使用一个点，因为它是一个类。 “。搜索栏”。但是，在您的特定情况下，您只想定位您的搜索栏字段。该字段上有一个名为 id="text_content" 的 ID，所以我只需使用 #text_content { /* 这里的样式 */ }

【解决方案2】：

您是否尝试使用此 CSS 将类直接应用到输入标签 OR -

.searchbar input{
// this CSS will only be applied to searchbar input box
left: 350px;
top:100px;
width: 300px;

}

您尝试应用于搜索栏的 CSS 错误。 Searchbar 是 div 的类而不是输入框。尝试使用上面的 CSS 并检查它是否有效

【讨论】：

在这种特定情况下，您的 CSS 可以工作，但我会避免将“输入”指定为样式表单。如果您的字段也有一个提交按钮，则样式也将适用于此。但是，您的文本框上已经有一个 ID……您应该只使用这个 ID。 #text_content { 风格转到这里}
我倾向于同意迈克尔的观点。虽然input[type="text"] {CSS HERE} 也可以用

【解决方案3】：

因此，searchbar 选择器应该以 . 字符开头，并且要覆盖输入选择器，它可能应该是 .searchbar input

对于input，您可能希望.input input 作为选择器..？

【讨论】：

或.. 进一步混淆.. .input input[type="text"] ;)

【解决方案4】：

您正在为所有输入字段使用通用选择器（CSS 的最后一部分：input { ..）。因此样式将应用于所有输入。

我建议给每个输入一个自己的类，这样您就可以为每个输入分配不同的样式。例如。

CSS

.search
{
    background: red;
}

.login
{
    background: blue;
}

HTML

<input type="text" class="search" />

此外，选择器“搜索栏”不会选择任何内容，因为它针对的是名为搜索栏的元素。如果要定位类，则需要使用 .例如：.searchbar

【讨论】：

我想补充一点，阅读一些 CSS 基础知识可能是个好主意，书籍或教程都可以。

【解决方案5】：

input { } 将样式应用于所有输入元素 input[type="text"] 等...

改为应用 .input input {} 为输入类中的输入元素应用样式

要为搜索栏中的输入元素应用样式，请使用 .searchbar 输入{}

【讨论】：