1.选择器
前提:亲儿子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*前提:亲儿子*/
.parent>p:first-child {
color: red;
}
.parent>p:last-child {
color: yellow;
}
.parent>p:nth-child(3) {
color: green;
}
</style>
</head>
<body>
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
</body>
</html>
2.后代选择器
.parent>div{}亲儿子
.parent div{}选中parent之后的所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
后代选择器
.parent>div{}亲儿子
.parent div{}选中parent之后的所有元素
*/
.parent>div{
color: red;
}
.parent div{
font-size:40px;
}
</style>
</head>
<body>
<div class="parent">
<div>good</div>
<div>hello</div>
<ul>
<li><div>child</div></li>
<li><div>child</div></li>
</ul>
</div>
</body>
</html>
3.伪类选择器
a:hover{}
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
a:hover{
}
伪类选择器
*/
a:hover{
color:red;
}
</style>
</head>
<body>
<a href="#">a</a>
</body>
</html>