css——你不知道的伪类

最新推荐文章于 2025-06-02 15:44:20 发布

一头秀发炮哥哥

最新推荐文章于 2025-06-02 15:44:20 发布

阅读量131

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_45627127/article/details/108332587

版权

css 专栏收录该内容

1 篇文章

订阅专栏

1、动态伪类

 .dynamic:link {
/* 有链接 */
      /* background: red */
  }

  .dynamic:visited {
      /* 链接点击后(拜访后) */
      /* background: orange */
  }

  .dynamic:hover {
      /* 滑入 */
      /* background: blue */
  }

  .dynamic:active {
      /* 激活状态，按住不送，(有:focus的时候会被替代) */
      /* background: green */
  }

  .dynamic:focus {
      /* 聚焦后 */
      /* background: pink */
  }

2、目标伪类

p:target {
/* 突出url中某个标识符的目标元素 */
    background: yellow
}

/* input的多选被选中时 */

.element-box[type='checkbox']:checked {
    background: red
}

/* 已启用的input */

.element-input[type='text']:enabled {
    background: green
}

/* 已禁用的input */

.element-input[type='text']:disabled {
    background: yellow
}

3、语言伪类

<p lang="en">Ceci est un paragraphe.</p>
:lang(en) {
	background: red;
}

4、元素伪类选择器

 .icon::before {
  content: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=591053194,1384024618&fm=26&gp=0.jpg');
    margin-right: 5px;
    vertical-align: middle
}

.welcome::before {
    content: attr(data-username)
}

5、结构伪类

.construction-box section:nth-child(4) {
/* 同级元素中所有元素第几个（如果是section的话则起作用） */
    /* color: yellow */
}

.construction-box section:nth-last-child(3) {
    /* 同级元素中所有元素倒数第几个 （如果是section的话则起作用）*/
    /* color: red */
}

.construction-box section:nth-of-type(4) {
    /* 同级元素中(相同)元素第几个 */
    /* color: red */
}

.construction-box section:nth-of-type(1) {
    /* 同级元素中(相同)元素倒数第几个 */
    /* color: red */
}

/* .construction-box section:first-child {
    color: red
}

.construction-box section:last-child {
    color: yellow;
} */

.construction-box section:only-child {
    /* 同级只有一个元素且是section */
    /* color: red */
}

.construction-box section:only-of-type {
    /* 同级只有一个section元素时 */
    /* color: red */
}
:root {
    /* 匹配元素所有在文档的根元素 */
    /* color: yellowgrepen */
}

.construction-box p:empty {
    /* 空的 */
    /* height: 20px;
    background: #ff0000; */
}

6、排除伪类

 .construction-box section:not(.aaa) {
 /* 排除指定的*/
      color: red
  }