具有可变数量段落的样式页脚

Question

我正在编写一个应用程序，它允许定义将应用于富文本元素的样式。样式指定各个段落的属性，并指示它们在页眉，正文和页脚中的数量。将应用样式的富文本元素可以包含任意数量的段落。下面的代码片段中显示了一个简化示例。

.container {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
}

.container > p {
    margin: 0;
    padding-left: 8px;
    padding-right: 8px;
}

/* Body paragraphs */
.container > :nth-child(2n+2) {
    font-weight: normal;
    color: silver;
}

.container > :nth-child(2n+3) {
    font-weight: normal;
    color: gray;
}

/* Footer paragraphs */
.container > :nth-last-child(-n+3) {
    font-weight: bold;
    color: green;
    background-color: #ffffa0;
}

.container > :nth-last-child(-n+2) {
    font-weight: bold;
    color: blue;
    background-color: #ffffa0;
}

.container > :nth-last-child(-n+1) {
    font-weight: bold;
    color: black;
    background-color: #ffffa0;
}

/* Header paragraphs */
.container > :nth-child(2) {
    font-weight: normal;
    color: fuchsia;
    background-color: #f0f0f0;
}

.container > :nth-child(1) {
    font-weight: normal;
    color: red;
    background-color: #f0f0f0;
}

<div class="container">
    <p>Paragraph 1
    <p>Paragraph 2
    <p>Paragraph 3
    <p>Paragraph 4
    <p>Paragraph 5
    <p>Paragraph 6
    <p>Paragraph 7
    <p>Paragraph 8
    <p>Paragraph 9
</div>
<div class="container">
    <p>Paragraph 1
    <p>Paragraph 2
    <p>Paragraph 3
    <p>Paragraph 4
</div>
<div class="container">
    <p>Paragraph 1
    <p>Paragraph 2
    <p>Paragraph 3
</div>
<div class="container">
    <p>Paragraph 1
    <p>Paragraph 2
</div>

标题段落按优先级设置样式，然后是页脚段落，并且根据需要对其余段落重复应用正文样式。我的大部分行为都是正确的，但页脚并不总是按照我的意愿设置。随着段落数量的减少，我想保持页脚顶部的样式并失去底部，但我得到了相反的结果。

在下图中，2个标题段落为灰色背景，3个页脚段落为黄色背景。在富文本具有5个或更多段落的情况下，应用所有样式。但是当富文本有4个段落时，只能显示2个页脚的段落，我想保留2个顶部段落的样式：本例中的绿色和蓝色段落。使用:nth-last-child，我看不到如何为页脚的顶部样式赋予更高的优先级。可以用CSS选择器完成吗？

Answer 1

是的，您可以通过确保每个页脚规则仅在元素是使用:nth-child(n+3)到:nth-child(n+5)从上到下计算的第3个孩子时适用。通过使用:nth-last-child(-n+3)到:nth-last-child(-n+1)来设置您的页脚段落的样式，您已经在那里中途;您只需将相应的:nth-child()添加到每个选择器。

/* Footer paragraphs */
.container > :nth-child(n+3):nth-last-child(-n+3) {
    font-weight: bold;
    color: green;
    background-color: #ffffa0;
}

.container > :nth-child(n+4):nth-last-child(-n+2) {
    font-weight: bold;
    color: blue;
    background-color: #ffffa0;
}

.container > :nth-child(n+5):nth-last-child(-n+1) {
    font-weight: bold;
    color: black;
    background-color: #ffffa0;
}

＆＃13;

＆＃13;

.container {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
}

.container > p {
    margin: 0;
    padding-left: 8px;
    padding-right: 8px;
}

/* Body paragraphs */
.container > :nth-child(2n+2) {
    font-weight: normal;
    color: silver;
}

.container > :nth-child(2n+3) {
    font-weight: normal;
    color: gray;
}

/* Footer paragraphs */
.container > :nth-child(n+3):nth-last-child(-n+3) {
    font-weight: bold;
    color: green;
    background-color: #ffffa0;
}

.container > :nth-child(n+4):nth-last-child(-n+2) {
    font-weight: bold;
    color: blue;
    background-color: #ffffa0;
}

.container > :nth-child(n+5):nth-last-child(-n+1) {
    font-weight: bold;
    color: black;
    background-color: #ffffa0;
}

/* Header paragraphs */
.container > :nth-child(2) {
    font-weight: normal;
    color: fuchsia;
    background-color: #f0f0f0;
}

.container > :nth-child(1) {
    font-weight: normal;
    color: red;
    background-color: #f0f0f0;
}

＆＃13;

<div class="container">
    <p>Paragraph 1
    <p>Paragraph 2
    <p>Paragraph 3
    <p>Paragraph 4
    <p>Paragraph 5
    <p>Paragraph 6
    <p>Paragraph 7
    <p>Paragraph 8
    <p>Paragraph 9
</div>
<div class="container">
    <p>Paragraph 1
    <p>Paragraph 2
    <p>Paragraph 3
    <p>Paragraph 4
</div>
<div class="container">
    <p>Paragraph 1
    <p>Paragraph 2
    <p>Paragraph 3
</div>
<div class="container">
    <p>Paragraph 1
    <p>Paragraph 2
</div>

＆＃13;

＆＃13;

＆＃13;

您的CSS中有许多重复的样式，但我不会让它们不受影响，以便您更容易看到实际重要的更改。