常用的伪类

CSS中的伪类是什么

伪类pseudo-class是指添加到选择器的关键字，指定要选择的元素的特殊状态。可以用来添加选择器的一些特殊效果，类似于给元素添加了另外的class。

常用伪类

我们常用的伪类有（记得冒号之前要加上空格）

:first-child/last-child/nth-child(n)

选择父标签的第n个孩子元素
充要条件：标签要对，第几个要对，否则就选不到。
例如

<style> .box :nth-child(1){color:red;}
  </style>  
<div class="box">
  <h1>ooo</h1>
  <p>sss</p>
  <ul>
    <li>xxx</li>
    <li>yyy</li>
    <ul>
      <li>zzz</li>
      <li>000</li>
    </ul>
  </ul>
</div>

这里，每一类的第一个元素会变成红色，<h1>ooo</h1>,<li>xxx</li>,<li>zzz</li>都会变红。

另外，:nth-child(n)中的n，可以使用2n以及even来表示偶数，2n+1和odd来表示奇数。

:first-of-type/last-of-type/nth-of-type(n)

选择标签下每一个标签的第几个
例如

<style>  .box :nth-of-type(1){color:red;}
  </style>
<div class="box">
  <h1>ooo</h1>
  <p>sss</p>
  <p>rrr</p>
  <p>xxx</p>
  <ul>
    <li>xxx</li>
    <li>yyy</li>
  </ul>
  <ul>
        <li>aaa</li>
        <li>bbb</li>
  </ul>
   <ul>
        <li>ttt</li>
        <li>iii</li>
      </ul>
</div>

这里，每一个标签的第一个会变红，也就是<h1>，<p>的第一个元素，第一个<ul>的全部元素，第二个<ul>的第一个<li>元素，第三个<ul>的第一个<li>元素会变红。

接下来是a链接最常用的四种伪类。

经常用于定义链接样式的四个伪类

他们是运用在a元素上的伪类（冒号之前不需要空格）

1.|:link 选中未访问的链接
2.|:hover 选中鼠标放置的链接
3.|:active 选中鼠标按下没松开时的链接
4.|:visited 选中访问过的链接

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

例子：

  <a href="index.html">主页</a>
  <style>
a:link{
  color:red;} 未点击访问时候的链接是红色
a:visited{
  color:blue;}点击访问后的链接是蓝色
a:hover{
  color:yellow;}鼠标放在主页选项上的时候是黄色
a:active{
  color:green;}访问过后的链接是绿色
    </style>

请注意！这四个伪类是有顺序要求的！

浏览器解释CSS遵循的是"就近原则"。我们在定义CSS中，宜将最一般的条件放在最上面，并依次向下，最下面放最特殊的。
否则便会有的伪类无法生效！

顺序遵循：

:link→:visited→:hover→:active

即可。

最后编辑于：2022.05.23 11:27:48