开发者学堂课程【移动 Web 前端开发：导航条-选择器覆盖】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8453
导航条-选择器覆盖
如何进行选择器覆盖
<nav class=”navbar navbar-default wjs_nav”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Brand</a>
</div>
.navbar-default{
background-color:#f8f8f8;
border-color:#e7e7e7;
}
.navbar-default .navbar-brand:hover,+
.navbar-default .navbar-brand:focus{
background-color:transparent;
border-color:#5e5e5e;
}
.navbar-default .navbar-text{
color:#777;
}
.navbar-default .navbar-nav > li a{
color:#777;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多标记构图法</title>
<style type="text/css">
.left{height:930px; background: url(img/left.jpg) no-repeat; }
.right{height:930px; background: url(img/right.jpg) no-repeat right; }
.top{height:930px; background: url(img/top.jpg) no-repeat center top; }
.center{height:930px; background: url(img/bottom.jpg) no-repeat center center; }
</style>
</head>
<body>
<div class="left">
<div class="right">
<div class="top">
<div class="center"></div>
</div>
</div>
</div>
</body>
</html>
id 选择器>类选择器类>伪类选择器>上下文选择器>通配选择器
即：
如果 id 中与 class 定义了相同的样式并引用在同个标签时，则会发生覆盖，不同的部分，还是可以都显示的。
