-
后代选择器(包含选择器),选择子孙后代
-
.nav a{
color: pink;
}
.wsc li{
color: greenyellow;
}div strong{ color: red; } <div class="nav"> <a href="#">内部链接</a> <a href="#">内部链接</a> <a href="#">内部链接</a> </div> <a href="#">内部链接</a> <a href="#">内部链接</a> <a href="#">内部链接</a> <ul class="wsc"> <li>一条狗</li> <li>一条狗</li> <li>一条狗</li> </ul>
-
子元素选择器,只选亲儿子 这些元素
div > strong{
color: green;
}
<div>
<strong>儿子</strong>
<strong>儿子</strong>
<strong>儿子</strong>
</div>
<div>
<p>
<strong>孙子</strong>
<strong>孙子</strong>
<strong>孙子</strong>
</p>
</div>
- 交集选择器,既是又是
p.red{
color: red;
}
<p class="red">红色</p>
<p class="red">红色</p>
<p class="red">红色</p>
<div class="red">红色</div>
<div class="red">红色</div>
<div class="red">红色</div>
<p>蓝色</p>
<p>蓝色</p>
<p>蓝色</p>
- 并集选择器(重点):用 , 隔开,理解为 和 的意思,通常用于集体声明
p,
span,
.red {
color:red;
}
<p>我和你</p>
<p>我和你</p>
<p>我和你</p>
<span>我和你</span>
<span>我和你</span>
<span>我和你</span>
<div class="red">我和你</div>
<div>我和你</div>
<div>我和你</div>
<h1>我和你</h1>
<h1>我和你</h1>
< h1>我和你</h1>
测试题
.nav ul li a{
color: orange;
}
.site-r a{
color:red ;
}
.nav,
.sitenav {
font: 14px "微软雅黑"
}
``<!-- 测试题 : 主导航栏 -->
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</ div>
<!-- 侧导航栏 -->
<div class="sitenav">
<div class="site-l">左侧导航栏</div>
<div class="site-r"><a href="#">登录</a>
</div>
</div>
- 链接伪类选择器(重点)
四个 a:link a:vistited a:hover a:active
顺序 l v h a
/* 未访问过的 */
a:link{
color: green;
text-decoration: none;
}
/* 已经访问过的链接 */
a:visited{
color: orange;
}
/* 鼠标经过链接时的状态 */
a:hover{
color: red;
}
/* 点击时按住鼠标为松开时的状态 */
a:active{
color: black;
}
<a href="http://www.xiaomi.com">小米手机</a>
<a href="http://www.dami.com">大米手机</a>