<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*先找到.parent下面的第二个子元素,在判断它是不是p*/
.parent p:nth-child(2){
color: red;
}
/*先找到.parent下面从后往前数的第二个子元素,在判断它是不是p*/
.parent p:nth-last-child(2){
color: blue;
}
/*先找到.parent下面所有的p,再找到第一个p元素*/
.parent p:nth-of-type(1){
color: green;
}
/*先找到.parent下面所有的p,再找到从后往前数第一个p元素*/
.parent p:nth-last-of-type(1){
color: yellow;
}
/*先找到.parent下面所有的p,再找到第一个p元素,等价于.parent p:nth-of-type(1)*/
.parent p:first-of-type{
color: #333;
}
/*先找到.parent下面所有的p,再找到最后一个p元素*/
.parent p:last-of-type{
color: #000;
}
/*先判断是不是唯一的子元素,再判断是不是span元素*/
.parent div span:only-child{
color: red;
}
/*先判断是不是p元素,再判断是不是唯一的一个p元素*/
.parent p:only-of-type{
color: #666;
}
</style>
</head>
<body>
<div class="parent">
<div><span>1</span></div>
<p>2256565</p>
<b>3</b>
</div>
</body>
</html>
CSS—常见伪类
最新推荐文章于 2024-07-28 18:09:15 发布