Tricky CSS條件同級>子選擇器>可以這樣做嗎？

在下面的標記中，我正在尋找一種方式（可能使用CSS選擇器）來根據菜單的存在以不同的方式設置內容div的樣式？菜單可能會或可能不會出現在該位置的標記中，如果它存在，我需要爲內容添加一些頂部邊距。Tricky CSS條件同級>子選擇器>可以這樣做嗎？

我相信同胞和後代選擇規則可能不會走這一步......

「當菜單呈現爲標題的子集的內容，頂邊（其母公司爲頭的兄弟姐妹）到100像素。否則，在您的標記設置爲零」

<div class="header"> 
    <div class="sitetitle">site title</div> 
    <div class="tagline">tagline</div> 
    <div class="menu">menu</div> 
</div> 

<div class="main"> 
    <div class="content">content goes here</div> 
</div>

如果CSS允許的分組，我會做這樣......

(.header ~ .menu) + (.main > .content) {margin-top:100px;}

來源

2010-09-30 Scott B

很確定你不能那樣做，但是我又看到了一些非常瘋狂的CSS規則。 – 2010-09-30 17:10:11

您可以製作條件選擇器的唯一方法是基於僞類和媒體查詢......您可以使用的目標和錨位於您想要選擇的元素之前或甚至在頁面的開頭。 – esp 2013-01-25 21:11:50

不可能的。

CSS選擇器只能查看祖先和兄弟軸。你不能往裏看（「我有什麼孩子」） - 只有向上（「我的父母是什麼」）和側身（「我旁邊的東西」）。

例子。這：

div.header div.menu

是指其祖先是<div class="header">的任何<div class="menu">之一。

此：

div.header > div.menu

是指任何其<div class="menu">直接祖先（即「父」）是一個<div class="header">。

此：

div.header ~ div.menu

指的是具有其前面的兄弟姐妹中的<div class="header">，任何<div class="menu">即，它們具有相同的父和發生一個接一個，但不一定彼此相鄰（這是「側視「）。

此：

div.header + div.menu

是指任何其<div class="menu">直接前述兄弟是<div class="header">。

CSS中沒有其他的遍歷選擇器（這個語句引用CSS2），當然也沒有條件。

來源

2010-09-30 17:11:41 Tomalak

你可以用兄弟選擇器橫向看 – esp 2013-01-25 19:51:34

@esp你是對的。我必須更新答案。 – Tomalak 2013-01-25 20:17:29

你可能會使用一些JavaScript來檢測。檢查菜單下，在負載報頭，如果是，那麼內容的邊距設置爲100像素

來源

2010-09-30 18:23:24 Ascherer

你可以使用jQuery：

$('.header:has(.menu) + .main > .content').css('margin-top', '100px');

不幸的是，:has()選擇沒有找到出路進入css3。

但你爲什麼不只是應用margin-bottom到div.menu？

來源

2010-09-30 18:50:23 nubbel

菜單是流出（絕對定位:) – 2010-09-30 20:37:49

我想爲菜單上的內容提供一些空間，這是絕對定位在該空間中的菜單。如果菜單不存在，則不需要空間。 – 2010-09-30 20:40:05

我在條件格式中使用了這個CSS代碼。通過從結束計數格式索引。

#stk-service-account-menu ul li:nth-last-child(1):before {

來源

2015-12-11 15:22:14

Tricky CSS條件同級>子選擇器>可以這樣做嗎？

回答

相關問題