CSS將圖片，標題，塊引號，圖片之後/之前的圖片作爲目標

在我的WordPress single.php中，我將圖片，文本，標題和塊引號混合在一起。我希望能夠根據每個圖像的位置應用特定的CSS。CSS將圖片，標題，塊引號，圖片之後/之前的圖片作爲目標

問題是我無法控制blockquote是否會跟隨圖像或h1或只是普通的p標記。例如，我不想增加p標籤的上邊距如果圖像後有一個h1標籤第一，但我做，如果沒有一個h1標籤等

HTML

<div id="single-pg" class="row"> 
    <?php the_content(); ?> 
</div>

CSS

我試圖在JavaScript的容器類無濟於事文本換行，所以我想沿着

#single-pg p { padding:0 20px; } 
#single-pg p + img{ margin-top:30px }

來源

2017-07-04 user3550879

那麼，什麼是你目前的努力結果如何？什麼是問題？ – Kaddath

CSS選擇器的組合可能可行，但這只是猜測而沒有看到代碼的其餘部分 –

結果是它在圖像之後定位到p標記。但是，如果圖像後面有一個h1標籤，它仍然會將額外的填充放在上面，因爲p標籤在圖像之後 – user3550879

的選項線的東西可以嘗試的目標是所有p標籤在IM之後年齡...喜歡...〔實施例

#single-pg p{padding:0 20px; margin-top:0;} 
 

 
#single-pg img + p{ margin-top:30px; background:red;} 
 

 

 
#single-pg img + h1{ background:blue;} 
 

 
#single-pg img + blockquote{ background:orange;}

<div id="single-pg"> 
 
    <img src="http://via.placeholder.com/350x150"> 
 
    <h1>h1</h1> 
 
    <p>paragraph</p> 
 
</div> 
 

 
<div id="single-pg"> 
 
    <img src="http://via.placeholder.com/350x150"> 
 
    <p>paragraph</p> 
 
</div>

來源

2017-07-04 12:51:01

好吧，所有文本都會在圖像之後（每個頁面都以圖像開頭）與h1標籤和blockquote標籤相同的技術工作？ – user3550879

是的，將匹配h1和blockquote ....您必須添加其類，例如更新的示例 –

好的真棒。謝謝 – user3550879

CSS將圖片，標題，塊引號，圖片之後/之前的圖片作爲目標

回答

相關問題