选择器
基本选择器
-
标签选择器
p{
color:red;
}a{
text-decoration:noe;
cursor:pointer;
} -
类选择器
.bg{
background-color:red;
} -
id选择器
#bg{
background-color:red;
} -
通配符选择器
* {
border: 0 solid white;
}
复合选择器
-
后代选择器(包含选择器)
<div>王者荣耀 </div> <div>王者荣耀 </div> <div><p>李白</p></div> <div class="laoli"><p>李白</p></div> <div>王者荣耀 </div> <div>王者荣耀 </div> <div>王者荣耀 </div>
选出所有的李白
div p { color:pink; } .laoli p{ color:purple; } <ul> <li>李白 </li> <li>杜甫 </li> </ul> <ol> <li>李白 </li> <li>杜甫 </li> </ol> ul li{ color:green; } ul li a{ //后代选择器 color:green; } ul li > a{ //子代选择器 color:green; }
-
交集和并集选择器
div.red{ color:red; } div,span,h1{ color:red; }
-
链接伪类选择器
:link :visted :hover :active //按下鼠标时的状态 //顺序不能颠倒 使用场景如下: a{ } a:hover{ }
测试题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav a{
color:orange;
}
.size-r a{
color:red;
}
.nav,.sitenav {
font: 14px "微软雅黑" ;
}
.nav > ul > li > a {
font-weight: 700;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav">
<div class="size-l">左侧导航</div>
<div class="size-r"><a href="#">登录</a></div>
</div>
</body>
</html>