关于nth-of-type选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.dog{
width:300px;
height: 400px;
position: relative;
margin: 0 auto;
}
.center{
left: 0;
right: 0;
margin: 0 auto;
}
.forhead{
width: 102px;
height: 48px;
position: absolute;
background-color: #f9f9f6;
border-radius: 51px/40px 40px 10px 10px;
}
.face{
width: 110px;
height: 60px;
position: absolute;
background-color: #f9f9f6;
border-radius: 50%;
top: 20px;
}
.chin{
width: 104px;
height: 36px;
position: absolute;
background-color: #f9f9f6;
border-radius: 52px/0 0 40px 40px;
top: 60px;
}
.ear{
width: 16px;
height: 70px;
position: absolute;
background-color: #1b2f90;
border-radius: 50%;
}
div.ear:nth-of-type(1){
top:20px;
left: 50%;
}
</style>
</head>
<body>
<div class="dog center">
<div class="forhead center"></div>
<div class="face center"></div>
<div class="chin center"></div>
<div class="ear"></div>
<div class="ear"></div>
</div>
</body>
</html>老师我这里用nth-of-type或者first-of-type选择第一个ear都没有效果
8
收起
正在回答
1回答
同学你好，关于你的问题，回答如下：
1、:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。但是这个同类型不是特指选择器类型，这块还与标签（元素）类型，有关系。
但是这里的第一个div元素不是.ear，所以是无效的。第四个才是。
如下，如下前三个兄弟元素，是其他标签的话，才可以哦。
2、first-of-type同理，也是因为前三个元素的类型（标签类型）与这个一致，所以div.ear不是父元素的第一个div子元素，所以无效的。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星