CSS 相邻兄弟选择器

先看定义,相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
上示例


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
    p+p {
        color: pink;
    }

    div+div+div+div{
        color: pink;
    }
    style>
head>

<body>
    <p>P1p>
    <p>P2p>
    <p>P3p>
    <p>P4p>
    <div>DIV1div>
    <div>DIV2div>
    <div>DIV3div>
    <div>DIV4div>
body>

html>

结果:
这里写图片描述
说好的相邻兄弟选择呢,字面上理解不是应该只选择到P2吗,可是却连P3,P4都选择了,这就是“3P” Σ(⊙▽⊙”a !
别急,让我们仔细看看

p+p {
        color: pink;
    }

代入示例里理解P1+P2匹配的是相邻的第二个p,也就是P2;
以为这就完了,剩下的P们表示很委屈╥﹏╥…
P2+P3,匹配到P3;
P3+P4,匹配到P4;
这样就形成了p+p匹配到了除了P1外的所有P的情况

经过上面的例子相信大家都理解了所谓的相邻兄弟选择器,再讲个小技巧, 要想匹配第几个元素,只要通过简单的相加即可

div+div+div+div{
        color: pink;
    }

这里匹配的是第四个div,是不是很简单(。・_・)/~~~

你可能感兴趣的:(前端)