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

只需使用n(th) child selector：注意类之间的空格，否则你正在寻找两个类的一个元素。

var div1 = $('.feature-box-main .feature-box').eq(1);
var div2 = $('.feature-box-main .feature-box').eq(2);

//for example:
div1.children('.feature-title').html('new Title');
div2.children('img').attr('src','new-imge.jpg');

另外，既然你提到要更改图像和标题，如果你的意思不仅仅是css更改，那么jQuery就像这样：

triggerHandler('click')

Answer 2

选择第一个div：

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

和第二个div与

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

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

2 个答案: