`hover` псевдокласс не работает

Question

Это мой файл css, до сих пор я создал простую навигационную панель. Но дело в моих <a> элементах в навигационной панели, когда я пытаюсь их стилизовать как в случае a, так и a:hover, они работают только тогда, когда я даю !important. Что происходит. Есть ли проблема специфичности?

@import url('http://fonts.googleapis.com/css?family=Lato'); 

.navbar { 
    background-color: #b6b5b4; 
    border-style: solid; 
} 

.container { 
    background-color: #bfbfbf; 
} 

body { 
    font-family: Lato; 
} 

a { 
    color: black !important; 
    font-weight: bold; 
} 

.navbar-right { 
    background-color: #aeaeae; 
} 

a:hover { 
    background-color: #dfdfdf !important; 
} 

Я новичок в css и html.

Answer 1

Вы импортировали Bootstrap, который имеет стиль CSS по умолчанию. То, что вы в основном делаете, пытается перезаписать эти стили. Тем не менее, Bootstrap, похоже, имеет приоритет над вашим CSS (вероятно, из-за порядка импорта в ваш HTML-файл), поэтому для этого требуется !important. Тег !important гарантирует, что этот особый стиль не может быть перезаписан или всегда отображается над другими.

<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 

Если ваш заказ, как это будет отображаться Bootstrap стиль, если вы не используете !important.

Answer 2

a:hover { background: #dfdfdf !important;} 

использовать это один

Answer 3

Что происходит, родитель дивы, как .container (может быть, не имеют свой HTML структуру) оказывает background-color CSS.
Этот css переопределит hover css на ребенка <a> элемент. !important ключевое слово сделано только для этой цели. Он не позволяет другим стилям переопределять себя.
Вот почему вы должны использовать ключевое слово !important в таких случаях.

Answer 4

Да, если у дать как этот

a { 
    background-color: black !important; 
} 

важно! переопределяет парения государственные стили также.

a { 
     background-color: dfdfdf; 
    } 

не работает.

дайте свой стиль, как этот

a { 
    background-color: black; 
    } 
//remove !important 

удалить !important из <a> тега. Состояние Hover работает нормально.
Сообщите мне, если у вас есть ошибки.

Answer 5

У вас есть файл css со стилями с его гнездованием! быстро исправить эту проблему: присвойте class для <a> со своими стилями!

a.my-class { 
    color: black; 
    font-weight: bold; 
} 
a.my-class:hover { 
    background-color: #dfdfdf; 
}