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

标签 css

我有一个父类,其中包含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>

最佳答案

通过以下方式选择第一个div

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


第二个div

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

关于css - 父类中具有相同名称的html类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30625702/

相关文章:

javascript - 如何顺利更改SVG源

html - 依赖 :after to add a colon to labels? 是否安全

css - 无法弄清楚是什么导致我的视​​口向右滚动

html - 使用外部CSS样式表仅更改HTML的特定部分

javascript - Divs 出现在其正常位置 "during the time they are displaying"下方并带有动画效果?

html - 问题显示两个div的一个又一个没有滚动条

javascript - 谷歌图表增加最大值

javascript - 多种隐藏/显示文字

php - 当我使用.htaccess重定向全部时,Bootstrap CSS无法正常工作

html - 居中我的 float ul