更多的选择器#CSS

Hellow大家好！今天我们来介绍一下种类极多的选择器！

上期我们说到标签选择器、类选择器和id选择器啊，不知道大家有没有熟练掌握了呢！

今天我们来介绍一种新的选择器，叫层次选择器，层次选择器呢又分为四种啊

这第一种呢叫后代选择器，什么意思呢让我们来看啊

<header>

<h1>

<div>我是后代选择器！</div>

</h1>

</header>

我们来看啊header元素里面包裹了h1元素，也就是说啊在这里呢header元素是h1元素的父元素，反过来说h1元素呢就是header元素的子元素啦，是不是很好理解呢。

我们再看啊h1元素里包裹了一个div元素，所以我们可以说啊h1元素是div元素的父元素，div元素啊是h1元素的子元素。

那有同学要问了，那header元素和div元素是什么关系呢！没错啊！header元素在这里啊是div元素的祖先元素，而div元素就是header元素的后代元素啦，所以嘛这个选择器叫后代选择器，通过层层关系来控制我们需要添加样式的元素，来我们来看实例！

<style>

    header h1 div{

        color: #008c8c;  }

</style>

    <header>

        <h1>

            <div>我是后代选择器！</div>

        </h1>

<div>我不是</div>

    </header>

 

这样子我们就通过后代选择器选择到了div啦。

第二种啊叫子元素选择器啊，顾名思义啊和上面的后代选择器有异曲同工之妙啊，但是书写有所不同啦，让我们来看实例！

<style>

 li>span{

     color: green;

 }

</style>

 

<ul>

      <li><span>绿色</span></li>

      <li>黄色</li>

      <li>红色</li>

  </ul>

 

这样就成功选择到啦！是不是很简单呢！

第三种叫相邻兄弟元素选择器啊，让我们来看

 <div>

        <span>大哥</span>

        <p>二弟</p>

    </div>

span元素和p元素被一同包裹在div元素里，那div就是他们俩的父元素，那他们俩是什么关系呢，没错啊！span元素就是p元素的兄弟元素，反过来说也一样啊p元素是span元素的兄弟元素，那兄弟元素该如果选中呢我们来看实例！

<style>

  span+p{

        background-color: green; }

</style>
 <div>

        <span>大哥</span>

        <p>二弟</p>

    </div>

 

这样啊我们就通过大哥选择到了二弟啊哈哈哈是不是非常有意思呢

最后一种啊叫通用兄弟选择器，这个啊是在兄弟比较多的情况下使用的

话不多说来看实例

<style>

span~p{

    background-color: green;}

</style>

 <div>

        <p>大哥</p>

        <span>二哥</span>

        <p>三弟</p>

        <p>四弟</p>

        <p>五弟</p>

    </div>

 

这样子啊就能选中span元素后面所有的p元素兄弟啦

只要勤加练习很快就熟练啦

本次的更新就到这里啦，点个关注再走哦！