如何在CSS中的段落之间交替样式?
问题描述:
我试过:nth-type,但我不确定是否有可能,或者如果该功能使我真正想要的。我需要一个交替的风格:左边对齐两个段落,然后右边两个,依此类推,即使我添加了新段落。如何在CSS中的段落之间交替样式?
这给我的意思一个粗略的想法:
Paragraph
Paragraph
Paragraph
Paragraph
Paragraph
Paragraph
Paragraph
Paragraph
答
这里有一种方法:
p {
clear:both;
float:left;
}
p:nth-of-type(4n+3), p:nth-of-type(4n+4) {
float:right;
}
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
<p>paragraph 7</p>
<p>paragraph 8</p>
+0
非常感谢:) – Danny 2015-01-09 19:20:17
答
尝试围绕第n个孩子玩(4N + X)
一个可能的解决方案......
p:nth-child(4n+1), P:nth-child(4n+2) {
// left styles
}
p:nth-child(4n+3), p:nth-child(4n+4) {
// right styles
}
所以,你正在寻找一个交替模式以应用到样式? – markthethomas 2015-01-09 18:22:33