0%

CSS3特殊选择器

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

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

相邻兄弟元素选择器

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

例如,有如下html:

1
2
3
4
5
<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:

1
2
3
4
<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元素:

1
2
3
4
5
6
<div class="father">
<p>test</p>
<div>
<p>test2</p>
</div>
</div>

那么我们可以写css:

1
father > p{color: red;}

两个类同时存在时才有的效果

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

1
.A .B{colore: red}

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

1
.A.B{color: red}

例如有对应的html:

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

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