1.后代选择器
选择父元素里的子元素,可以是基础选择器里的任意组合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ol li {
}
ul li span {
}
</style>
</head>
<body>
<ol>
<li></li>
</ol>
<ul>
<li><span></span></li>
</ul>
</body>
</html>
2.子选择器
只能选择作为某元素最近一级子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#banner>p {
color: #ADFF2F;
}
</style>
</head>
<body>
<div id="banner">
<p>1</p>
<span>
<p>2</p>
</span>
</div>
</body>
</html>
3.并集选择器
为多组标签定义相同样式,个选择器间用逗号隔开
如:
<style type="text/css">
div,p {
color: #ADFF2F;
}
</style>
4.伪类选择器
链接伪类:尽量按照 lvha 的顺序
a:link : 选择所有未被访问链接
a:visited : 选择所有已经被访问链接
a:hover : 选择鼠标指针经过
a:active : 选择鼠标一直按下未松开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link{
color: #7D7D7D;
text-decoration: none;
}
a:visited{
color: hotpink;
}
a:hover{
color: red;
}
a:active{
color: green;
}
</style>
</head>
<body>
<a href="www.baidu.com">hello world</a>
</body>
</html>
5.:focus选择器
:focus表单选取焦点:
input:focus{
}
如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input:focus{
color: red;
background-color: #7D7D7D;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="1" />
<input type="text" name="" id="" value="2" />
<input type="text" name="" id="" value="3" />
</body>
</html>