我有一个包含 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 ></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 ></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 ></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 ></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/