CSS基础之结构伪类选择器
一、结构伪类选择器的使用场景:
常用来查找某父级选择器的子元素
常见公式:
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB 2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style: none;
}
li{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
/* 选中第一个给天蓝色 */
ul li:first-child{
background-color: skyblue;
}
/* 给偶数个为粉色 */
ul li:nth-child(2n){
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li><a href="">这是我的第1个标签</a></li>
<li><a href="">这是我的第2个标签</a></li>
<li><a href="">这是我的第3个标签</a></li>
<li><a href="">这是我的第4个标签</a></li>
<li><a href="">这是我的第5个标签</a></li>
<li><a href="">这是我的第6个标签</a></li>
<li><a href="">这是我的第7个标签</a></li>
<li><a href="">这是我的第8个标签</a></li>
</ul>
</body>
</html>
二、伪元素
一般为页面中不是很重要的部分,不在页面主体中,一般用于装饰性的不重要的小图。由CSS模拟出来的标签效果。
1、种类
2、注意:
(1)必须在content属性才能生效
(2)伪元素默认为行内元素。
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB 2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.love::after{
content: "你";
}
.love::before{
content: "我";
}
</style>
</head>
<body>
<div class="love">
爱
</div>
</body>
</html>
效果如下