<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<link rel="stylesheet" href="css\style.css">
<style>
h2{
color: blue;
font-size: 32px;
}
.lei{
color: aqua;
background-color: blueviolet;
}
#idcard{
color: brown;
font-size: 12px;
}
.father > .son{
color: yellow;
font-size: x-large;
}
.father > p{
color: aquamarine;
}
/*同时存在子元素选择器优先级高于后代选择器*/
h5:hover{
color: aqua;
background-color: blue;
}
</style>
</head>
<body><h1>不同类型的css选择器</h1>
<h2>这是一个元素选择器</h2>
<h3 class="lei">这是一个类选择器</h3>
<h4 id="idcard">这是一个id选择器</h4>
<div class="father">
<p class="son">这是一个子元素选择器</p>
<p class="grandson">这是一个后代选择器</p>
<h6>这是一个外部链接</h6>
</body>
</html>
代码实现的效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
