1.关联选择器
设置嵌套标签的样式
<html>
<head>
<title>html示例</title>
<style type="text/css">
div p{
background-color:red;
}
</style>
</head>
<body>
<div><p>sadfghkjkghdfsafdgf</p></div>
<p>测试关联选择器</p>
</body>
</html>
2.组合选择器
顾名思义也就是让不同的标签具有相同的样式
<html>
<head>
<title>html示例</title>
<style type="text/css">
div,p{
background-color:red;
}
</style>
</head>
<body>
<div>aaaaaaaaaaaaa</div>
<p>bbbbbbbbbbbbbbb</p>
</body>
</html>
3.伪元素选择器
css提供一些定义好的样式,可以拿过来直接使用。
比如:超链接标签
超链接的状态:
原始状态: :link 鼠标悬停上面的状态: :hover 点击::click
<html>
<head>
<title>html示例</title>
<style>
:link{
background-color:red;
}
:hover{
background-color:blue;
}
:active{
background-color:blue;
}
:visited{
background-color:blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com.cn">超链接一为了测试伪元素选择器</a>
</body>
</html>
也就是不同的状态显示不同的内容