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

我有一个父类，其中包含4个子类，其中每个子类包含2个以上的类。我有的问题是所有的子类都有相同的名字！作为一个wordpress主题，我不能改变这个html，所以我只想使用一个自定义的css表单来单独更改每个表单。每个类的内容都不相同，所以有没有使用子元素或类似的方法？在父类中具有相同名称的html类

 <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>

来源

2015-06-03 Damien24

我想改变每个人的img，标题和内容，但他们都会有所不同 – Damien24

CSS不能改变**实际**内容..只是它的样式。目前还不清楚你想要做什么。你也许想删除你的原始问题 - http://stackoverflow.com/questions/30623408/edit-classes-with-same-name-within-a-class-using-only-css –

我只是想找到离开将标题内容（例如页面标题1，页面标题2等）更改为我自己的标题以及.feature内容。它是一个wordpress主题，我可以用一张自定义的css表格来改变它们，但是它们都改变成了相同的东西！我想单独针对每个班级，并在每个班级中放入不同的内容？ – Damien24

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

.feature-box-main .feature-box:nth-child(1) { 
    /*styles for first div here*/ 
} 
.feature-box-main .feature-box:nth-child(2) { 
    /*styles for second div here*/ 
}

而且，既然你提到你想改变形象和标题，如果你的意思是不是只是CSS的变化也许jQuery的进来手是这样的：

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');

来源

2015-06-03 16:32:31

感谢大家的帮助，会看到最好的作品。 – Damien24

请注意类之间的空间 –

与选择第一div：

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

和第二div与

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

来源

2015-06-03 17:22:05 Jess

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

回答

相关问题