Override идентификатор для класса позиционирования

Question

У меня есть идентификатор для элемента, с помощью CSS, как так:

#red { 
    background-color: #2ac0a3; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    position: relative; 
    bottom: 220px; 
    left: 365px; 
} 

Я хочу, чтобы добавить класс #red DIV переопределить положение, однако, кажется, не Работа. Любые идеи как?

JS:

$('#red').addClass('ya'); 

CSS

.ya{ 
position: relative; 
left: 900px; 
} 

Спасибо!

Answer 1

Идентификаторы имеют более высокий приоритет, чем классы. Чтобы изменить стиль ID, вам нужен более конкретный селектор:

.ya, #red.ya { 
    position: relative; 
    left: 900px; 
} 

Answer 2

Значения в «ид» (#red) являются более конкретным, то класс (НАПРИМЕР «.ya»). Таким образом, правила CSS, установленные в «id», имеют приоритет (I.E. являются применяемыми правилами).

Если вы ввели атрибуты, которые будут более конкретными и, следовательно, будут иметь приоритет над правилами «id». Значение Inline добавляет значения как атрибут «стиль».

<sometag style="position: relative;left: 900px;" </sometag> 

С JQuery что-то вроде

$('#red').attrib('style','position: relative;left: 900px;'); 

Надежда, что помогает.

Answer 3

Не забывайте о важном флаге!, Который вы можете установить с помощью любого CSS.

Например:

#red { 
    background-color: #2ac0a3; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    position: relative; 
    bottom: 220px; 
    left: 365px; 
} 

... может быть перезаписана:

.ya { 
    position: relative !important; 
    left: 900px !important; 
} 

Это имеет ряд преимуществ, сохраняя CSS в чистоте и порядке, и более прост в управлении, когда вам нужно получить и изменить его или добавить к нему по дороге.

Кроме того, здесь скрипку для демонстрации концепции: http://jsfiddle.net/WDgNF/