Twitter Bootstrap3 вопросы

Ниже приведена простая панель навигации, которую я реализовал с помощью бутстрапа.Twitter Bootstrap3 вопросы

HTML

<!doctype html> 
<html> 
    <head> 
    <title> Bootstrap </title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="../css/mobile.css"> 
    </head> 

    <body> 
    <div id = "container"> 
    <nav class="navbar navbar-default"> 
     <a class="navbar-brand" href="#">Home</a> 
    </nav> 

    <h4>Search WWW</h4> 

    <ul class="nav"> 
     <li> <a href="#"> Bing </a></li> 
     <li> <a href="#"> Google </a></li> 
     <li> <a href="#"> Yahoo </a></li> 
    </ul> 

    <h4> Dubious Websites </h4> 

    <ul class="nav"> 
     <li> <a href="#"> Reddit </a></li> 
     <li> <a href="#"> Tumblr </a></li> 
     <li> <a href="#"> Youtube </a></li> 
    </ul> 

    <h4> Reference </h4> 

    <ul class="nav"> 
     <li> <a href="#"> Wow </a></li> 
     <li> <a href="#"> Adobe </a></li> 
     <li> <a href="#"> Wikipedia </a></li> 
    </ul> 
    </div> 
    </body> 
</html>

CSS

body{ 
    margin: 15px; 
} 

div { 
    width: 25%; 
} 

.navbar { 
    background-color: lightgray; 
    font-weight: bold; 
} 

nav a { 
    text-shadow: 1px 1px #fff; 
} 

h4 { 
    margin-top: 20px; 
} 

ul { 
    border: 1px solid lightgray; 
    border-radius: 15px; 
} 

ul li a { 
    color: black; 
} 

ul li a:hover { 
    color: lightblue; 
} 

.nav li a:hover { 
    background: none; 
}

У меня есть следующие вопросы:

1) Как выровнять текст в панели навигации (например, панель навигации с именем класса navbar navbar-default)?

2) Я не понимаю, как я могу выбрать элемент nav, используя .navbar, когда присвоенное ему имя класса: navbar navbar-default?

3) Я не понимаю, почему следующий фрагмент кода не работает

ul li a:hover { 
    color: lightblue; 
    background: none; 

}

Но этот фрагмент работает

ul li a:hover { 
    color: lightblue; 
} 

.nav li a:hover { 
    background: none; 
}

Так в основном, мой вопрос заключается в том, что улица носит имя класса nav. Итак, почему ul li a:hover и .nav li a:hover не относятся к одному элементу?

источник

2015-06-08 Anonymous

2) navbar navbar-default на самом деле два отдельных класса. Поэтому, ссылаясь на .navbar, этот элемент будет выбран.

3) .nav li a:hover более конкретно, что ul li a: hover. Итак, в вашем первом примере это, вероятно, переопределяется где-то еще в CSS-файле Bootstrap. Вы можете узнать больше о специфике css здесь: Points in CSS specificity

источник

2015-06-08 20:39:42 pgruber

Спасибо. Это было полезно. –

Twitter Bootstrap3 вопросы

ответ

Смежные вопросы