css - 如何給html節(jié)點內(nèi)的第一個子節(jié)點定義樣式
問題描述
文檔結(jié)構(gòu)如下
- <article> |- <h1> or <h2> or <p> or ... # 第一個子節(jié)點,出現(xiàn)內(nèi)容不確定 |- <h1> or <h2> or <p> or ... # 第二個子節(jié)點,不受第一個影響 |- <h1> or <h2> or <p> or ... # 同上
如上面的代碼所示,由于 h1, h2, p 這些具有不同的 margin-top,我想將緊跟著的這些元素的 margin-top 都重置為 0,但同時不影響后面出現(xiàn)的這些 tag,應該用什么方法?
更新:附上使用 first-child 后的效果:http://jsfiddle.net/Ygdfc/1/
問題解答
回答1:如果使用 css3 的話,可以用:
/* 選擇第一個子元素 */article h1:first-child{ margin-top:0;}
鑒于某知名瀏覽器(我也不知道哪個瀏覽器,呵呵)對 CSS3 不夠支持,可以使用大名鼎鼎的 jquery 來解決。
$('article h1:first-child').css('margin-top',0);回答2:
CSS2 也支持第一個子節(jié)點的選擇符:
article > h1, article > h2, article p { /* CSS here */}
參考:
http://www.w3.org/TR/CSS2/selector.html#child-selectors
相關(guān)文章:
1. angular.js - angular做點擊購買時的遮罩層2. android - NavigationView 的側(cè)滑菜單中如何保存新增項(通過程序添加)3. 請教!!!本地laravel項目我想本地運行,怎么在本地訪問控制器里的方法。4. 連續(xù)的數(shù)值怎么用分組顯示,求大神指導,求各位老師幫忙5. 請問這位老師的PHPSTORM主題是自定義的嗎6. 關(guān)于thinkphp 5.1中,ajax提交數(shù)據(jù)url的格式寫法,加花括號就出錯,請老師指點7. http://run.php.cn/在線PHP程序運行結(jié)果不正確8. 老師 我是一個沒有學過php語言的準畢業(yè)生 我希望您能幫我一下9. PHP注冊功能10. tp5 不同控制器中的變量調(diào)用問題
