css伪类选择器

最新推荐文章于 2024-07-14 12:36:02 发布

绘星者

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量195

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44808632/article/details/128103421

版权

伪类和伪元素一样,并不是直接针对文档元素的,而是基于某些共同特征选择元素提供方便,实现对于页面元素的修饰

伪类和伪元素的区别

作用不同:
- 伪类是一种状态，可以看看做是选择器。比如鼠标经过伪类:hover,比如结构伪类 li:nth-child,一个冒号。
- 伪元素是元素，简单来说，就是用css模拟出来了一个盒子。
权重不相同
- 伪类是10（类、属性选择器 [type=submit]）
- 伪元素是1(标签选择器)
使用场景不同
- 比如:鼠标经过盒子，盒子里面的样式会有变化，则需要使用伪类
- 如果想在盒子内部插入一个小盒子，此时可以使用伪元素。

概要:

问题	解决方案
选择文档中的根元素	`:root`选择器
选择子元素	`:first-child :last-child :only-child :only-of-type`选择器
选择指定索引处的子元素	`:nth-child :nth-last-child :nth-of-type :nth-last-of-type`选择器
选择启用或禁用的元素	`:enabled :disabled`选择器
选择被勾选的单选按钮或复选框元素	`:check`选择器
选择默认元素	`:default`选择器
根据输入验证选择元素	`:valid :invalid`选择器
选择指定范围的输入元素	`:in-range :out-of-range`选择器
根据是否允许使用必需属性选择输入元素	`:required :optional`选择器
选择超级链接	`:liked :visited`选择器
选择鼠标当前悬停在其上的元素	`:hover`选择器
选择当前被用户点击或触控的元素	`:active`选择器
选择获得焦点的元素	`:focus`选择器
选择不匹配某个选择器的元素	否定选择器
选择没有子元素或没有内容的元素	`:empty`选择器
根据语言选择元素	`:lang`选择器
选择设置了锚点的元素	`:target`选择器

使用结构性伪类选择器

根元素选择器

:root{
    
}
p:root{
    
}

选择元素的根元素,其实都是<html></html>,所以没啥用

使用子元素选择器

E:first-child:如果E元素的父元素的第一个子元素是E,则选择E
E:last-child:如果E元素的父元素的最后一个子元素是E，则选择E
E:only-child:如果E元素的父元素只有一个E类元素则选择E
E:only-of-type:如果E元素的父元素与E元素是同一种元素，则选择E
E:nth-child(n):如果E元素的父元素的第n个元素是E,则选择E
E:nth-last-child(n):如果E元素的父元素的倒数第n个元素是E,则选择E
E:nth-of-type(n):如果E元素的父元素的第n个子元素与E元素是同类型,则选择E
E:nth-last-of-type(n):如果E元素的父元素的倒数第n个子元素与E元素同类型,则选择E

使用UI伪类选择器

根据元素的状态匹配元素

`:enabled`与`:disabled`:选择被启用的元素(默认)与禁用的元素(`disabled`布尔属性)

 <style>
     textarea:enabled{
         background-color: orange;
     }
     textarea:disabled{
         background-color: greenyellow;
     }
    </style>
<body>
    <textarea name="" cols="30" rows="10">enabled</textarea>
    <textarea name="" cols="30" rows="10" disabled>disabled</textarea>
</body>

`:checked`:选择被勾选的元素(多用于单选按钮复选按钮)

<style>
        *{
            margin: 0;
            padding: 0;
        }
        :checked+span{
            color: red;
            background-color: yellow;
          /*   被勾选的文字被改变背景色  */
        }
</style>
<body>
<form action="#">
  <label for="on"><input type="radio" id="on" name="on"><span>开</span></label>
  <label for="off"><input type="radio" id="off" name="on"><span>关</span></label>
</form>
</body>

`:defaut`:选择默认元素(如:`submit`型`button`就是表单里的默认按钮)

`:valid`和`:invalid`:选择符合或不符合输入验证的`input`元素

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        :in-range{
            color: green;
            /*在1-10范围内,数字为绿色*/
        }
        :out-of-range{
            color: red;
            /*在1-10范围之外,数字为红色*/
        }
</style>
<form action="#">
  <label for="num">please change your number: <input type="number" max="10" min="1" id="num"></label>
</form>

`:required选择器`:选择具有`required`属性的元素

使用动态伪类选择器

根据条件的改变匹配元素

`:link`与`:visited`

:link:选择所有链接元素
visited:选择已访问过的链接元素
- 同href属性值的链接元素视为同一个链接元素

`:hover`:选择用户鼠标悬停在其上的任意元素

`:active`:选择被鼠标点击着或被触控着的任意元素(看浏览器的解析)

`:focus`:选择成为焦点的元素(似乎就`input`可被聚焦)

<style>
  div{
    height: 100px;
    width: 100px;
    border: black 1px solid;
  }
  .box1:hover{
    background-color: red;
  }
  .box2:active{
    background-color: yellow;
  }
  .box3:focus{
    background-color: green;
  }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <input class="box3">ffff</input>
</body>

其他伪类选择器

`:not(<E>)`:选择非E的所有元素

<style>
  div{
    height: 100px;
    width: 100px;
    border: black 1px solid;
  }
  div:not([class="box2"]){
    background-color: red; 
 /*        选择在div元素中没有class属性为box2值的元素     */
  }
</style>
<body>
    <div class="fa">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div >box3</div>
    </div>
</body>

`:empty`:选择没有任何子元素或内容的元素

<style>
  div{
    height: 100px;
    width: 100px;
    border: black 1px solid;
  }
  div:empty{
    background-color: red;
/*        选择没有内容也没有子元素的div元素    */
  }
</style>
<body>
    <div class="fa">
      <div class="box1"><p></p></div>
      <div class="box2"></div>
      <div >box3</div>
    </div>
</body>

`:lang(<目标语言>)`:好像和`|=`选择器差不多

`:target`:选择设置了锚点的元素

<style>
  div{
    height: 1000px;
    width: 100px;
    border: black 1px solid;
  }
  #myid{
    background-color: yellow;
  }
  a:target{
    color: red;
    text-decoration: none;
/*          选择被设置了锚点的a元素          */
  }
</style>
<body>
    <a href="helloworld.html#myid">跳转到...</a>
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3" id="myid"></div>
</body>