Почему addClass не имеет приоритета и появляется граница?

См. JSFddle — http://jsfiddle.net/ww2010ku/. ниже код jQuery -

$("#x").click(function () {
$(this).animate({
    "height": "45px",
        "width": "45px"
}, 100);
$(this).addClass("lg");
});

У меня есть 2 вопроса. 1) Почему при нажатии появляется синяя рамка, хотя я сделал границу: нет. 2) Почему класс «lg» не имеет приоритета и не отображает кнопку зеленого цвета, поскольку в идеале сначала должен быть установлен красный цвет, а затем зеленый, который является последним правилом и имеет приоритет.


jquery css addclass
person Nikhil Pai    schedule 28.12.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

1) эта «синяя рамка» называется контуром, используется в сфокусированных вводах, чтобы ее нельзя было добавить

кнопка: наведите курсор {схема: 0}

2) поскольку идентификатор уникален в элементе, а класс - нет, поэтому селектор идентификатора имеет более высокий приоритет, и свойства внутри него будут взяты перед теми, что в селекторе класса, вы можете изменить ".lg" на "#x .lg". чем конкретнее селектор в css, тем больше иерархии. ПД: извините за мой плохой английский

person Jiancerouno Taringa    schedule 28.12.2014

arrow_upward
1
arrow_downward

  1. Граница вызвана :контуром фокуса элемента. Вы можете избавиться от него так:

#x:focus {
    outline: 0;
}
  1. #x более конкретен, чем .lg, поэтому цвет фона не имеет приоритета. Вы можете изменить это, сделав CSS #x.lg, который снова выиграет конкретность .

jsFiddle here

person StuartLC    schedule 28.12.2014