扩展选择器
1、关联选择器
<div><p>aaaaaaa</p></div>
设置div标签里面的p标签的样式，嵌套标签里面的样式
div p
{
background-color:red;
}
<!doctype html>
<html>
<head>
<title>Document</title>
<style type = "text/css">
div p
{
background-color:red;
}
</style>
</head>
<body>
<div><p>中国社会主义牛逼</p></div>
<p>wwwwwwwwww</p>
</body>
</html>
2、组合选择器
<div>111</div>
<p>2222</p>
把div和p标签设置成相同的样式
div,p
{
background-color:red;
}
<!doctype html>
<html>
<head>
<title>Document</title>
<style type = "text/css">
div,p
{
background-color:red;
}
</style>
</head>
<body>
<div>11111111</div>
<p>222222222</p>
</body>
</html>
3、伪元素选择器
css里面提供了一些定义好的样式，可以直接使用
比如使用超链接
超链接的状态：
原始状态，鼠标放上去的状态，点击时的状态，点击后的状态
:link :hover :active :visited
<!doctype html>
<html>
<head>
<title>Document</title>
<style type = "text/css">
/* 原始状态 */
a:link
{
background-color:red;
}
/* 悬停状态*/
a:hover
{
background-color:green;
}
/*点击时状态*/
a:active
{
background-color:blue;
}
/*点击后的状态*/
a:visited
{
background-color:gray;
}
</style>
</head>
<body>
<a href = "http://www.baidu.com.cn" target = "_blank">超链接测试111</a>
</body>
</html>