Question

我使用了以下HTML和CSS代码：

＆＃13;

p.head-1 {
    font-size:250%;
    color:#696969;
}

p.head-2 {
    font-size:100%;
}

p.head-1+p.head-2 {
    text-align:center;
    display:block;
}

＆＃13;

<div id="header">
    <p class="head-1">
    This is main heading
    </p>
    <p class="head-2">
    this is another header component
    </p>
</div>

＆＃13;

但是尽管使用兄弟选择器，只有head-2接受CSS属性，而head-1仍然受影响 ie＆＃39; text-align＆＃39;属性仅由head-2类接受，但不受head-1

接受

Answer 1

你误解了邻近的兄弟选择器。

它的作用，并且在你的情况下成功，是识别与另一个元素相邻的元素。

在您的示例中，只有head-2与head-1相邻时才会识别head-1。但{{1}}本身并未包括在内。

Answer 2

您可以像这样简单地包装您的CSS：

#header p{
  font-size:250%;
  color:#696969;
  text-align: center;
  /*display:block -- not needed as p is block level element by default*/
}

或者，使用更复杂的选择器：

p[class^="head"]{
  text-align: center;
}

如果你想组合选择器，那么使用逗号not plus运算符（加上运算符用于下一个兄弟）：

p.head-1, p.head-2
{
text-align:center;
}

相邻的兄弟选择器没有在我的标记上工作

2 个答案: