css - 父类中具有相同名称的html类

Question

我有一个包含 4 个子类的父类，每个子类又包含 2 个类。我遇到的问题是所有子类都有相同的名称!作为一个 wordpress 主题，我无法更改该 html，所以我只想使用自定义 css 表来单独更改每个。每个类的内容都不一样，有没有办法使用子元素之类的？

       <div class="feature-box-main site-aligner">
                <div class="feature-box ">
                    <img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon1.png">
                    <div class="feature-title">Page Title 1</div><!-- feature-title -->
                    <div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
                    <a href="#">Read More &gt;</a>
                </div><!-- feature-box -->                                                  
                <div class="feature-box ">
                    <img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon2.png">
                    <div class="feature-title">Page Title 2</div><!-- feature-title -->
                    <div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
                    <a href="#">Read More &gt;</a>
                </div><!-- feature-box -->                                                  
                <div class="feature-box ">
                    <img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon3.png">
                    <div class="feature-title">Page Title 3</div><!-- feature-title -->
                    <div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
                    <a href="#">Read More &gt;</a>
                </div><!-- feature-box -->                                                  
                <div class="feature-box last">
                    <img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon4.png">
                    <div class="feature-title">Page Title 4</div><!-- feature-title -->
                    <div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
                    <a href="#">Read More &gt;</a>
                </div><!-- feature-box --><div class="clear"></div>                                 
        </div>

Answer 1

选择第一个div:

.feature-box-main.feature-box:nth-child(1) {
// styles
}

和第二个 div

.feature-box-main.feature-box:nth-child(2) {
// styles
}