相邻的兄弟姐妹选择器不在我的标记上工作。

Question

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

​

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;
}

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

​

但是，尽管使用了同级选择器，只有head-2接受CSS属性，而head-1仍然是有效的ie，“文本对齐”属性仅由head-2类接受，而不是由head-1接受。

Answer 1

您可以简单地将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加号运算符(加号运算符用于下一个兄弟姐妹)：

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

Answer 2

你误解了相邻的兄弟姐妹选择器。

在您的例子中，它所做的和成功的是识别一个与另一个元素相邻的元素。

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