What went wrong with the nth-child () selector?

I don"t know how to describe the problem either.
Let"s code first
this is normal.

*{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 0 auto;
            width: 600px;
            height: 400px;
            background: -sharpabcdef;
        }
        div > .oUl >li{
            list-style: none;
            width:150px;
            height:400px;
            background: url(../images/5.jpg);
            background-repeat: no-repeat;
            float: left;
        }
        .oUl li:nth-child(1){
            background-position: 0 0 ;
        }
        .oUl li:nth-child(2){
            background-position: -150px 0 ;
        }
        .oUl li:nth-child(3){
            background-position: -300px 0 ;
        }
        .oUl li:nth-child(4){
            background-position: -450px 0 ;
        }
  
<div>
        <ul class="oUl">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

li:nth-child .oUl


limarginmargin


what is the principle of this? I am confused. I have come to ask the bosses for advice.

Apr.01,2021

this is the priority issue of CSS.
first of all, you need to understand that the background of CSS is actually an omitted way of writing. See

Previous: For the li tab of dynamic rendering in react, click to switch styles.

Next: Ask a question about the use of ButterKnife in conjunction with Fragment

Menu