在父類中具有相同名稱的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類

回答

相關問題