CSS3特殊选择器

写页面好久了，自然对html、css等的积累是有的，但是最近遇到一些css的选择器问题让我很苦恼，感觉对css还是了解太少，这次就专门来看看css3的特殊选择器。

常见的css选择器有：类选择器(class)、id选择器、元素选择器等。

相邻兄弟元素选择器

如果需要选择紧接在元素后的一个元素，而且二者有相同的父元素，那么可以使用相邻兄弟选择器：+。

例如，有如下html：

<div>
  <h1>test h1</h1>
  <p>test p1</p>
  <p>test p2</p>
</div>

我们希望在紧接在h1元素后出现的段落（p1）加上上边距：

1
2
3

h1+p{
  margin-top: 20px;
}

兄弟选择器，位置无需相邻，只需同级，即可选择所有同层级后的兄弟节点。通用兄弟选择器：~。

例如，有如下html：

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>

我们希望P元素后的span元素都是红色，那么我们可以写css：

1
2
3

p~span{
  color: red;
}

如果希望选择的是第一个后代元素，而不影响所有后代元素，那么可以使用子元素选择器：>。

例如，希望将下面html中第一个div下面的p元素颜色设置为红色，但不影响其他的p元素：

<div class="father">
  <p>test</p>
  <div>
    <p>test2</p>
  </div>
</div>

那么我们可以写css：

1	father > p{color: red;}

一般情况我们有A、B两个类，如果B是A的子元素的类的话，我们为了限制类的作用域，如果需要将A的子元素B设置为红色，会这样写：

1	.A .B{colore: red}

那假如我有个元素，只有A和B两个类同事存在的情况下才会有样式，那怎么办？可以去掉中间的空格：

1	.A.B{color: red}

例如有对应的html：

1	<p class="A B">这里显示红色</p>

这样子对应的元素才会显示为红色。