学习前端之CSS选择器（二）

学习前端之CSS选择器（二）

上次讲了简单的选择器，这次来分享一些复杂选择器！

父子选择器（派生选择器）

废话不多说，直接上代码。

<div class = "box">
    <span>我是第一个span</span>
    <div>我是第二个div</div>
    <div class = "smallbox">
        <span>我是第二个span</span>
    </div>
</div>

这里我们想要选中第二个span,先从最外层的div开始找，再找第二层，依次这么找。

.box .smallbox span{
    background-color:pink;
}

这样我们就能找到第二个span标签啦

注：父子选择器只在于父子关系

直接父子选择器（>）

<div class = "box">
    <span>我是第一个span</span>
    <div>我是第二个div</div>
    <div class = "smallbox">
        <span>我是第二个span</span> 
    </div>
</div>

.box > .smallbox > span{
    background-color:red;
}

并列选择器

<div class = "box">
    <span>我是第一个span</span>
    <div>我是第二个div</div>
    <div class = "smallbox">
        <span class = "wrapper">我是第二个span</span> 
    </div>
</div>

span.wrapper{
    background-color:rgb(255, 174, 0);
}

注：格式：标签选择器.class的名字，属性选择器[]标签，id的名字.标签选择器或标签选择器id名。

标签选择器必须放前面（除与id名一起外）。

分组选择器

<div class = "box">
   <span>我是第一个span</span>
       <div class = "box2">我是第二个div</div>
       <div class = "smallbox">
           <div>吧啦吧啦</div>
           <span class = "wrapper">我是第二个span</span>     
       </div>
 </div>

.wrapper,
.box2{
    background-color:rgb(194, 253, 243);
}