Selector
The basic selector
-
Tag selector
p{
color:red;
}a{
text-decoration:noe;
cursor:pointer;
} -
Class selector
.bg{
background-color:red;
} -
id selector
#bg{
background-color:red;
} -
Wildcard selector
* {
border: 0 solid white;
}
Composite selector
-
Descendant selectors (selectors included)
<div>王者荣耀 </div> <div>王者荣耀 </div> <div><p>李白</p></div> <div class="laoli"><p>李白</p></div> <div>王者荣耀 </div> <div>王者荣耀 </div> <div>王者荣耀 </div>All elected Li Bai
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; } -
Intersection and union selector
div.red{ color:red; } div,span,h1{ color:red; } -
Link pseudo class selector
:link :visted :hover :active //按下鼠标时的状态 //顺序不能颠倒 使用场景如下： a{ } a:hover{ }
Test questions
<!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>
