<html>
<head>
<meta charset="UTF-8">
<title>CSS的扩展选择器</title>
<style type="text/css">
/*(1)关联选择器 设置div标签里面p标签的样式,嵌套标签里面的样式*/
div p {
background-color: blue;
color: red;
}
/*(2)组合选择器 把div和p标签设置成相同的样式,把不同的标签设置成相同的样式*/
div, p {
background-color: yellow;
color: black;
}
/*(3)伪元素选择器 css里面提供了一些定义好的样式,可以拿过来使用*/
/*原始状态*/
a:link {
background-color: red;
}
/*悬停状态*/
a:hover {
background-color: green;
}
/*点击状态*/
A:active {
background-color: blue;
}
/*点击之后状态*/
A:visited {
background-color: gray;
}
</style>
</head>
<body>
<div><p>div p 关联选择器</p></div>
<p>不受影响 关联选择器</p>
<div>div 组合选择器</div>
<p>p 组合选择器</p>
<a href="#">伪元素选择器</a>
</body>
</html>
CSS的扩展选择器:关联选择器组合选择器伪元素选择器
最新推荐文章于 2023-08-07 17:18:06 发布