CSS中常用的伪类选择器

一 、伪类(不存在的类,特殊的类)

-伪类用来描述一个元素的特殊状态

比如:第一个元素,被点击的元素,鼠标移入的元素···

-特点:一般请情况下,使用:开头

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

3、 :nth-child() 选中第n个子元素

特殊值: n 所有的

2n或even 选中偶数

2n+1或odd 选中奇数

---以上这些伪类都是根据所有的子元素进行排序

1、:first-of-type

2、:last-of-type

3、:nth-of-type()

功能跟上面相似,

---不同的是,这是在同类型的子元素中去选择

二、:not() 否定伪类

-将符合条件的元素从选择器中去除

以下为代码演示

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*去掉项目符号*/
      ul {
        list-style: none;
      }
      /* 需求一:将ul里的第一个li自动一直设置为红色 */
      /* ul>li:first-child{color:red} */
      /* ul>li:last-child{color:blue} */
 
      /* ul>li:not(:nth-child(3)){color: green;} */
      /* ul>li:not(:nth-of-type(3)){color: green;} */
      /* li:nth-child(1) {
        color: pink;
      } */
      /* li:nth-of-type(1){
        background-color: red;
      } */
      li:not(:first-of-type){
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <h1>沁园春·雪</h1>
    <h3>毛泽东</h3>
    <ul>
      <span>测试</span>
      <p>北国风光,千里冰封,万里雪飘。</p>
      <li>望长城内外,惟余莽莽;大河上下,顿失滔滔。</li>
      <li>山舞银蛇,原驰蜡象,欲与天公试比高。</li>
      <li>须晴日,看红装素裹,分外妖娆。</li>
      <li>江山如此多娇,引无数英雄竞折腰。</li>
      <li>惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。</li>
      <li>一代天骄,成吉思汗,只识弯弓射大雕。</li>
    </ul>
  </body>
</html>
相关推荐
sunbyte3 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库6 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端6 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常7 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程