應該！重要的是在這里使用？

Question

我有一個表單，默認值在焦點上消失，如果用戶沒有輸入任何內容，則重新出現在模糊處。 當用戶鍵入某些內容時，文本的顏色會變為深黑色，如果文本框因用戶輸入的文本而變得模糊。

問題：當用戶輸入內容時，或者當文本框與用戶輸入的文本進行模糊而不使用!important時，我無法將字體更改為深黑色。 做錯了，需要我使用!important ，還是有更好的方法？

HTML代碼

<div id="splash_register_form">
        <input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" />
        <input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" />
        <input type="text" name="register_email" class="splash_register_long_input" title="Email" />
        <input type="text" name="register_password" class="splash_register_long_input" title="Password" />
</div>

jQuery代碼

$(".splash_register_short_input, .splash_register_long_input").each(function() {
    $(this).val( $(this).attr('title') );
});

$(".splash_register_short_input, .splash_register_long_input").focus(function() {
    if($(this).val() == $(this).attr('title')) {
        $(this).val('');
    }
});

$(".splash_register_short_input, .splash_register_long_input").blur(function() {
    if($(this).val() == '') { // If there is no user input
        $(this).val($(this).attr('title'));
        $(this).removeClass('splash_register_have_userinput');
    } else {    // If there is user input
        $(this).addClass('splash_register_have_userinput');
    }
});

CSS

.splash_register_long_input {
    height: 22px;
    width: 300px;
    padding: 3px 0px 3px 8px;
    margin: 0px 1px 2px 0px;
    float: left;
    font-family: Arial, Sans-Serif;
    font-weight: bold;
    border: 1px solid #5cb5ee;
}

.splash_register_long_input:focus {
    border: 2px solid #5cb5ee;  
    width: 298px;
    height: 20px;
}

.splash_register_short_input{
    height: 22px;
    width: 144px;
    padding: 3px 0px 3px 8px;
    margin: 0px 1px 2px 0px;
    float: left;
    font-family: Arial, Sans-Serif;
    font-weight: bold;
    border: 1px solid #5cb5ee;
}

.splash_register_short_input:focus {
    border: 2px solid #5cb5ee;  
    width: 142px;
    height: 20px;/
}

.splash_register_short_input:focus, .splash_register_long_input:focus {
    color: #333 !important;
    -webkit-box-shadow:0 0 10px #5cb5ee;
    -moz-box-shadow:0 0 10px #5cb5ee;
    box-shadow:0 0 10px #5cb5ee;
    outline: none;  /* prevent chrome from adding border */
}

#splash_register_form input {
    color: #AAA;
}

.splash_register_have_userinput {
    color: #333 !important;
}

Answer 1

我看到發生了什么。 ID在CSS中具有更高的優先級，即使它們出現在同一元素的類樣式規則之前。 您可以在此處離開！important或將最后一條規則更改為：

#splash_register_form .splash_register_have_userinput {
    color: #333 !important;
}

Answer 2

!important規則提供了一種讓您覺得最重要的樣式始終應用的方法。 無論CSS規則中出現哪個規則，都會應用具有!important規則的樣式（在大多數情況下）。

Answer 3

這是您的代碼的解決方案之一。

輸入單詞返回灰色的原因是因為您使用id選擇器 #splash_register_form input將灰色應用於模糊文本，而類選擇器 .splash_register_have_userinput應用用戶輸入文本。

並且導致id選擇器的優先級高於類選擇器。 因此，當您的焦點離開輸入時，灰色會返回並覆蓋類選擇器。

要解決這種情況，可以在div中添加一個類名（如果你在同一頁面上有其他div和輸入），使用類選擇器應用灰色，並使用更精確的選擇器如input.className來應用黑色然后，您可以從代碼中刪除!important 。