CSS下一個元素

162

，如果我有一個標題標籤<h1 class="hc-reform">title</h1>CSS下一個元素

h1.hc-reform{ 
    float:left; 
    font-size:30px; 
    color:#0e73bb; 
    font-weight:bold; 
    margin:10px 0px; 
}

之後，我有一段<p>stuff here</p>

怎麼說呢使用CSS使下面的h1.hc-reform每<p>標籤使用方法：clear:both;

會是這樣：

h1.hc-reform > p{ 
    clear:both; 
}

由於某些原因無法正常工作。

來源

2010-09-07 tony noriega

330

這就是所謂的adjacent sibling選擇，它是由一個加號代表......

h1.hc-reform + p { 
    clear:both; 
}

注：這不是在IE6以上支持。

來源

2010-09-07 15:24:40

這隻會選擇'p'剛剛'h1.hc-reform'後說到。然後，它可能是唯一一個'clear：both'需要應用於它的工作，因爲它只是清除了'h1'浮點數，所以它仍然是一個有效的答案。 – BoltClock 2010-09-07 15:25:42

+1更快的槍！並鏈接到w3c – 2010-09-07 15:26:29

（重新刪除你的評論）是的，但它只會選擇*一個*'p'。 – BoltClock 2010-09-07 15:28:06

否>是一個子選擇器。

你想要的是+

所以儘量h1.hc-reform + p

瀏覽器的支持並不是很大

來源

2010-09-07 15:25:28

的>是child selector。所以如果你的HTML看起來像這樣：

<h1 class="hc-reform"> 
    title 
    <p>stuff here</p> 
</h1>

......那就是你的票。

但是如果你的HTML看起來像這樣：

<h1 class="hc-reform"> 
    title 
</h1> 
<p>stuff here</p>

然後你想要的adjacent selector：

h1.hc-reform + p{ 
    clear:both; 
}

來源

2010-09-07 15:26:12

我當然希望他沒有嵌套p的h1的內部..此外，毗鄰只選擇第一個p。 – 2010-09-07 15:31:56

可以使用sibling selector~：

h1.hc-reform ~ p{ 
    clear:both; 
}

這將選擇所有p元素來了fter .hc-reform，不只是第一個。

來源

2010-09-07 15:30:55

第一個鏈接中的IE錯誤是模糊的邊緣情況，這可能是爲什麼quirksmode忽略它們。 – 2010-09-07 16:25:54

不完全。 h1.hc-reform > p的意思是「任何p正好在h1.hc-reform下的一個水平」。您要的是h1.hc-reform + p。當然，這可能會在舊版本的Internet Explorer中導致一些問題;如果你想讓頁面與較老的IE兼容，那麼你會停留在爲段落手動添加一個類或者使用一些JavaScript（例如，在jQuery中，你可以執行類似於$('h1.hc-reform').next('p').addClass('first-paragraph')的操作）。

來源

2010-09-07 15:32:15

CSS下一個元素

回答

相關問題