如何为第一个<div>和第三个<div>

Question

我有一个“ provide”块，其中仅需要对第一个和第三个块“ blok1

做“ margin-right”

我尝试了nth-child()，但没有成功

<div class = "provide">
                <div class = "blok1">
                    <img class = "photo" src ="img/settings.jpg">
                    <h3>Management</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor</h4>
                </div>
                <div class = "blok1">
               <img class = "photo" src ="img/pencil.jpg">
                    <h3>UI /UX Design</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
                </div>
                <div class = "blok1">
                <img class = "photo" src ="img/diamond.jpg">
                    <h3>Logo / Branding</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
                </div>
                <div class = "blok1">
                <img class = "photo" src ="img/truck%202.jpg">
                    <h3>Animation</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet, consect netur.</h4>
                </div>
     </div>

Answer 1

.provide > .blok1:first-child, .provide > .blok1:nth-child(3) {
    margin-right: 15px;
}

或

.provide > .blok1:nth-child(odd) {
    margin-right: 15px;
}

Answer 2

您可以为现有的类名称分配一个新的类名称，并将CSS应用于这些类名称。在这种情况下，我为现有的类 blok1 写了一个类 .myBlock 。请记住，我已经为您准备了具有所需输出的代码段。

.myBlock{
margin-right:100px
}

<div class = "provide">
                <div class = "blok1 myBlock">
                    <img class = "photo" src ="img/settings.jpg">
                    <h3>Management</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor</h4>
                </div>
                <div class = "blok1">
               <img class = "photo" src ="img/pencil.jpg">
                    <h3>UI /UX Design</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
                </div>
                <div class = "blok1 myBlock">
                <img class = "photo" src ="img/diamond.jpg">
                    <h3>Logo / Branding</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
                </div>
                <div class = "blok1">
                <img class = "photo" src ="img/truck%202.jpg">
                    <h3>Animation</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet, consect netur.</h4>
                </div>
     </div>

确保将边距权利的值更改为所需值。我将其设置为100px，以向您展示其工作原理。

Answer 3

This should work. 

.provide .blok1:first-child,
.provide .blok1:nth-child(3) {
  margin-right: 36px;
}
.blok1 {
  border: 1px solid red;
}

<div class = "provide">
                <div class = "blok1">
                    <img class = "photo" src ="img/settings.jpg">
                    <h3>Management</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor</h4>
                </div>
                <div class = "blok1">
               <img class = "photo" src ="img/pencil.jpg">
                    <h3>UI /UX Design</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
                </div>
                <div class = "blok1">
                <img class = "photo" src ="img/diamond.jpg">
                    <h3>Logo / Branding</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
                </div>
                <div class = "blok1">
                <img class = "photo" src ="img/truck%202.jpg">
                    <h3>Animation</h3>
                    <h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet, consect netur.</h4>
                </div>
     </div>