为什么第三个元素中的nth-of-type元素无法正常工作？

huangapple
go评论91阅读模式
英文:

Why do nth-of-type elements fail to work at third-element?

问题

I have some question about Css nth-of-type.
In the code below,
nth-of-type(2) and nth-of-type(3) is work ,
but nth-of-type(4) and nth-of-type(5) can't work.

Is there anything wrong in my code?

  1. <div id="insideCircle">
  2.     <div class="outsideNumber"></div>
  3.     <div class="outsideNumber"></div>
  4.     <div class="outsideNumber"></div>
  5.     <div class="outsideNumber"></div>
  6.     <div class="outsideNumber"></div>
  7. </div>
  1. .outsideNumber{
  2.   width: 0px;
  3.   height: 250px;
  4.   position: absolute;
  5.   top: 50%;
  6.   left: 50%;
  7.   transform: translate(-50%,-50%);
  8. }
  9. .outsideNumber:nth-of-type(2){
  10.   width: 1px;
  11.   background-color: red;
  12.   transform: translate(-50%,-50%) rotate(30deg);
  13. }
  14. .outsideNumber:nth-of-type(3){
  15.   width: 1px;
  16.   background-color: yellow;
  17.   transform: translate(-50%,-50%) rotate(60deg);
  18. };
  20. .outsideNumber:nth-of-type(4){
  21.   width: 1px;
  22.   background-color: green;
  23.   transform: translate(-50%,-50%) rotate(90deg);
  24. };
  26. .outsideNumber:nth-of-type(5){
  27.   width: 1px;
  28.   background-color: lightblue;
  29.   transform: translate(-50%,-50%) rotate(120deg);
  30. }

When I disable nth-of-type(2), the 3 and 4 element work but 5 not.
It seems like nth-of-type(4) can be selected, but when it becomes the third element, it's broken.
I wonder why nth-of-type is broken after the third element?

And also I want to know, does nth-of-type work on class?
I see some documents say it can only select HTML tags.
If it can't work on classes, then why does .outsideNumber:nth-of-type(2) work?

英文:

I have some question about Css nth-of-type.
In the code below,
nth-of-type(2) and nth-of-type(3) is work ,
but nth-of-type(4) and nth-of-type(5) can't work.

Is there anything wrong in my code?

  1. &lt;div id=&quot;insideCircle&quot;&gt;
  2.       &lt;div class=&quot;outsideNumber&quot;&gt;&lt;/div&gt;
  3.       &lt;div class=&quot;outsideNumber&quot;&gt;&lt;/div&gt;
  4.       &lt;div class=&quot;outsideNumber&quot;&gt;&lt;/div&gt;
  5.       &lt;div class=&quot;outsideNumber&quot;&gt;&lt;/div&gt;
  6.       &lt;div class=&quot;outsideNumber&quot;&gt;&lt;/div&gt;
  7. &lt;div&gt;
  1. .outsideNumber{
  2.   width: 0px;
  3.   height: 250px;
  4.   position: absolute;
  5.   top: 50%;
  6.   left: 50%;
  7.   transform: translate(-50%,-50%);
  8. }
  9. .outsideNumber:nth-of-type(2){
  10.   width: 1px;
  11.   background-color: red;
  12.   transform: translate(-50%,-50%) rotate(30deg);
  13. }
  14. .outsideNumber:nth-of-type(3){
  15.   width: 1px;
  16.   background-color: yellow;
  17.   transform: translate(-50%,-50%) rotate(60deg);
  18. };
  20. .outsideNumber:nth-of-type(4){
  21.   width: 1px;
  22.   background-color: green;
  23.   transform: translate(-50%,-50%) rotate(90deg);
  24. };
  26. .outsideNumber:nth-of-type(5){
  27.   width: 1px;
  28.   background-color: lightblue;
  29.   transform: translate(-50%,-50%) rotate(120deg);
  30. }

When I disable nth-of-type(2) the 3 and 4 element work but 5 not.
It seems like nth-of-type(4) can be select but when it become the third element,it's broken.
I wonder why nth-of-type broken after the third element?

and also I want to know is nth-of-type work on class?
I see some document say it can only select html tag.
If it can't work on class,then why the .outsideNumber:nth-of-type(2) work?

答案1

得分: -1

代码是正确的。只有一个分号，所以你需要移除它，就这样。

  1. .outsideNumber:nth-of-type(3){	
  2.   width: 1px;	
  3.   background-color: yellow;	
  4.   transform: translate(-50%,-50%) rotate(60deg);	
  5. }
  6. .outsideNumber:nth-of-type(4){	
  7.   width: 1px;	
  8.   background-color: green;	
  9.   transform: translate(-50%,-50%) rotate(90deg);	
  10. }

希望这对你有帮助。

英文:

The code is correct only.
you have been given a semi-colon, so you have to remove that's it.

  1. .outsideNumber:nth-of-type(3){	
  2.   width: 1px;	
  3.   background-color: yellow;	
  4.   transform: translate(-50%,-50%) rotate(60deg);	
  5. }
  6. .outsideNumber:nth-of-type(4){	
  7.   width: 1px;	
  8.   background-color: green;	
  9.   transform: translate(-50%,-50%) rotate(90deg);	
  10. }

I hope this worked for you.

huangapple
  • 本文由 发表于 2023年5月17日 14:26:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76269099.html
  • css
  • css-selectors
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定