☀️这些CSS里的选择器你知道多少❓

第一个 .wz-ex1:hover

它的选择的是当鼠标指针移动到元素位置状态的元素。

  <h1>伪类选择器 ：hover</h1>
  <p class="wz-ex1">当鼠标悬浮在这里</p>

  .wz-ex1:hover{
    background-color: #3eccd3;
  color: red;
  }

我们来看看效果，相信大佬早知道了，别急相信后面会有你不知道的选择器。

---

第二个.wz-ex2::selection

它选择的是用鼠标选中部分的元素部分，注意不是全部元素🐧。

 <h1>伪类选择器 ::slection</h1>
  <p class="wz-ex2">当鼠标选中某些部分</p>

  .wz-ex2::selection{
    background-color: #3eccd3;
  color: red; 
  }
  

我们来直接看结果吧🙉

---

第三个 .wz-ex3:focus

它用于选择获得'焦点'的元素，就是刚刚才被点击的元素，而且还没有下一次点击的时候。 另外可以给input设置开始焦点就在哪里，给input 加一个 autofocus 属性就行💀。

.wz-ex3:focus{
    width: 100px ;
    background-color: #3eccd3;  
    color: red;
    border: 2px solid #4ecd94;
  }

  <h1>伪类选择器 :focus</h1>
  <input class="wz-ex3" type="text" autofocus>
  

其实一看效果就容易理解

第四个 input:checked + label

这个选择的是被选中的input后面紧挨着的元素

  <h1>选中 checked 状态的 input 的后面的label标签</h1>
  <h1>相邻兄弟选择器 + 号 </h1>
  <label for="wz-inp">我是input前面紧挨着的label嗷嗷嗷</label>
  <input id="wz-inp" type="checkbox" >选择1
  <label for="wz-inp">我是input后面紧挨着的label嗷嗷嗷</label>

    input:checked + label{
    font-weight: 700 ;
    color: #c41b24;
    font-size: 30px;
    background-color: #34b4bd;
  }

效果如下

第五个 li:nth-child(odd)

这个选择器就是选择偶数次序的元素

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

  li:nth-child(odd){
    background-color: #34b4bd;
  }

效果：

第六个 li:not(:last-child)

选择不是最后一个元素之外的其他元素li 效果如图

第七个 .container > :nth-child(3)

这个选择的是.container里的第三个子代元素

 <div class="container" id = "demo">
    <h1>nth-child vs nth-of-type</h1>
    <p>这是第一个段落</p>
    <div>这是一个div</div>
    <p>这是第二个段落</p>
    <p>这是第三个段落</p>
    <div>这是第二个div</div>
  </div>

 .container > :nth-child(3){
    background-color: yellow;
    color: red;
  }

效果如图

第八个 .container p :nth-child(3)

这个选择的是.container里的第三个元素，但必须是该元素必须是p，不然就是怎么也选不上。

  .container p :nth-child(3){
    background-color: yellow;
    color: red;
  }

效果如下

对的，你没看错，😏就是没有效果，不信可以自己试试。

第九个 .container p:nth-of-type(2)

这个选择器选择的是## .container元素内部的第二个p标签。

   .container p:nth-of-type(2){
    background-color: yellow;
    color: red;
  }

效果如下

如果这些你知道70%，那你肯定css基础不错，如果全部都知道那你肯定是一个css大佬，如果不是也快了。