css - 交替部分樣式？

我想在白底黑和黑底白之間切換，只要遇到<h3>就切換。這可能嗎？例如，在下面的代碼，css - 交替部分樣式？

<h3>Heading one</h3> 
<p>The first paragraph.</p> 
<p>The second paragraph.</p> 
<p>The third paragraph.</p> 
<h3>Heading two</h3> 
<p>The fourth paragraph.</p> 
<h3>Heading three</h3> 
<p>The fifth paragraph.</p> 
<p>The sixth paragraph.</p> 
<h3>Heading four</h3> 
<p>The seventh paragraph.</p> 
<p>The eighth paragraph.</p> 
<p>The ninth paragraph.</p>

標題一個和三個，和第1，第2，3，5，6將黑上白色;其他人將是白色的黑色。

實際的頁面內容是在Markdown中創作的，所以我不能簡單地將<div class="inverted">（Markdown中HTML標籤的內容被解析爲HTML，但我希望它們被解析爲Markdown）中的一半部分。）我知道nth-of-type，但它隻影響標題本身。

來源

2014-07-03 Qwertie

你可能必須使用javascript/jquery – bsapaka

不幸的是，由於css是一種標記而不是編程語言，因此它不適合處理動態內容。

，如果你知道你要多少段落，標題有，那麼你可以硬編碼樣式如下：

CSS：

h3:nth-of-type(1) ,h3:nth-of-type(1) ~ p{ 
    background:black; 
    color:white; 
} 
h3:nth-of-type(2) ,h3:nth-of-type(2) ~ p{ 
    background:white; 
    color:black; 
} 
h3:nth-of-type(3) ,h3:nth-of-type(3) ~ p{ 
    background:black; 
    color:white; 
} 
h3:nth-of-type(4) ,h3:nth-of-type(4) ~ p{ 
    background:white; 
    color:black; 
}

活生生的例子：Demo

但是，如果您不知道要使用多少個標題/段落，則必須使用JavaScript。或者，你可以繼續寫下高達nth-of-type(100)的樣式，我敢肯定，你的文本中不會超過100個標題。但我非常不喜歡這個，更好地使用JavaScript。

UPDATE

alrighty，以「補」醜陋的白色空間，也有很多竅門：
一個是刪除標題和段落的邊緣，但增加的line-height創建人工線空間：

p,h3{ 
    line-height:2em; 
    margin-top:0; 
    margin-bottom:0; 
}

另一個訣竅是使用CSS3僞選擇:after文字下創建黑/白背景一塊巨大的隱藏空間的xD但這是相當沉重和複雜。

我已經更新了小提琴演示中的第一個技巧。

UPDATE 2

這裏是一個例子如何利用:after選擇隱藏難看背景： :after Demo

來源

2014-07-03 19:02:24 Banana

嘿，這是一個巧妙的把戲！但是我猜想可能很難在黑色段落之間的背景中「填充」醜陋的空白區域，而不改變或不知道繼承的邊距，並且考慮到也可能存在其他需要顏色變化的元素，例如'ul' ，「ol」，「backquote」等等。它必須是JavaScript。 – Qwertie

實際上，你仍然可以欺騙這個xD，當我在PC上（現在在移動設備上）寫一個例子 – Banana

哦，甜的：DI知道會有遠遠少於100個標題，所以我更喜歡CSS解決方案，如果它可以正常工作。 – Qwertie

以下是不是最好的解決方案。但是，如果您確實知道某個標題後面可以顯示特定的最大段落數，則可以在不使用JS & jQuery：http://jsfiddle.net/CG5fU/1/的情況下通用。

CSS：

h3:nth-of-type(2n), 
h3:nth-of-type(2n) + p, 
h3:nth-of-type(2n) + p + p, 
h3:nth-of-type(2n) + p + p + p, 
h3:nth-of-type(2n) + p + p + p + p, 
h3:nth-of-type(2n) + p + p + p + p + p, 
h3:nth-of-type(2n) + p + p + p + p + p + p, 
h3:nth-of-type(2n) + p + p + p + p + p + p + p { 
    background-color: #000; 
    color: #fff; 
}

而且，這裏是一個jQuery的解決方案：http://jsfiddle.net/CG5fU/3/。

$("h3:nth-of-type(2n)") 
    .nextUntil("h3") 
    .andSelf() 
    .css({"background-color": "#000", 
      "color": "#fff"});

來源

2014-07-03 19:30:39 DRD

雖然有些用戶提供了一些完成原始問題請求的「解決方案」，但真正的問題在於HTML的結構。換句話說，因爲您想要以可視化的方式對內容分組進行樣式化，您應該首先將內容分組到某種父元素（例如div,ul，article等）中。一旦以這種方式設置了內容，CSS就有多種方式來處理這樣的請求，這與完全合理，這與大多數這些建議的「解決方案」不同，後者依賴於您將擁有多少個h3或預設的「解決方案」或腳本來解密HTML結構中應該已經顯而易見的內容。

大多數CMS提供了一些方法來允許預定義的HTML元素保持完整，這將允許它們被使用。

解決真正的問題（HTML結構）應該是你的焦點，而不是繪製糟糕的標記與更糟糕的CSS。可能會畫一堆糞便看起來像一個美味的芝士漢堡，但任何試圖消費它的人都會感到非常失望。

來源

2016-05-23 18:40:58

HTML結構沒有錯 - 它是完全標準的。將一個標題及其關聯內容封裝在一個「div」中是不正常的。此外，更改HTML可能很困難，因爲源文本是Markdown，而不是HTML，而MD-> HTML的轉換是由GitHub完成的，而不是我完成的（儘管GH最近切換到允許包含MD的HTML標籤的Kramdown，所以我現在猜測它更容易）。關於一件事你是對的 - 這裏提出的解決方案工作得不好。看來Javascript是要走的路。 – Qwertie

css - 交替部分樣式？

回答

相關問題