Mam element wejściowy:

<input id="box" type="text" />

Oraz następująca klasa CSS:

.box-change
{
    border-color:#ffffff;
}

Jak również następujący kod jQuery:

$('#box').toggleClass('box-change');

Jednak nie zmienia koloru granicznego, jak się spodziewam. Czy ktoś wie dlaczego?

Edytować:

Wejście ma już styl, jest zatem:

#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}
2
TheBoss 4 wrzesień 2012, 03:15

2 odpowiedzi

Najlepsza odpowiedź

Ponieważ oryginalne style są zdefiniowane za pomocą #box bardziej konkretne niż .box-change i domyślnie zastępuje nowe dodatki. Może to również być, że .box-change jest wyższy w górę kaskady niż #box.

Możesz rozwiązać go jeden z dwóch sposobów:

#box.box-change{
  border-color: #fff;
}

Lub

.box-change{
  border-color: #fff !important;
}
2
ahren 3 wrzesień 2012, 23:38

Jeśli pierwotnie usunęłeś granicę, musisz ustawić

border-width

I

border-style

Więc w krótkim czasie CSS powinien wyglądać:

.box-change
{
    border: 1px solid #fff;
}

Ale to wszystko zależy od tego, jaki jest twój początkowy styl, jaki kolor jest tła elementu zawierającego wprowadzenie itp. ...

Edytuj po więcej szczegółów

Twoja klasa nie jest stosowana, ponieważ klasa, która ustawia styl według ID ma wyższy priorytet w kaskadzie niż klasa CSS. To główny powód, dla którego nie widzisz go zastosowanego.

Jeśli chcesz, aby Twoja klasa CSS do przejęć masz dwie opcje:

  1. Ustaw go jako ważne:

    .box-change
    {
        border: 1px solid #fff !important;
    }
    
  2. zapewnić zasadzie CSS, która ma wyższą specyficzność i przejmie

    #box.box-change
    {
        border: 1px solid #fff;
    }
    

Drugi sposób jest preferowany sposób, ponieważ przy użyciu !important sprawi, że Twoje CSS trudniej utrzymać, ponieważ zajęcia nie kaskadowe zgodnie z CSS, ale raczej zgodnie z twoją znaczeniem. I możesz łatwo tracić kontrolę nad tym. Unikaj ważnych, chyba że rzadko się pojawiają.

Jak to rozwiązywać?

Aby pomóc Ci w przyszłości, powinieneś użyć narzędzi deweloperskich w przeglądarce (Devtools chrome lub Firebug dla Firefoksa), który natychmiast pokazałby problem. I oczywiście zrozumieć zasady specyficzności CSS i jak kaskada.

3
Robert Koritnik 3 wrzesień 2012, 23:44