微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 前端选择器之常规选择器、伪类选择器与伪元素

博主信息

博文 11

粉丝 0

访问量 10648

专题推荐

更多>

1.简单选择器

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: blue;
            height: 50px;
            width: 500px;
            border: 5px solid coral;
        }
        /* 元素选择器：标签选择器 */
        .box {
            color: red;
            background-color: black;
            border: 5px solid cyan;
        }
        /* 类选择器：前面为 . ,对应着HTML标签中的class属性 */
        #box1 {
            background-color: chartreuse;
        }
        /* id选择器：前面为# */
    </style>
</head>
<body>
    <div>1</div>
    <div class="container">
        <div class="box" id="box1">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
</body>
</html>

演示效果

常规选择器有标签选择器、类选择器、ID选择器等
ID选择器现在很少用，大部分用在表单元素和锚点上，所以尽可能用类选择器
从效果图中可以得知
优先级:标签选择器 < 类选择器 < ID选择器

2.上下文选择器

后代选择器使用类+空格+标签组成

  /* 后代选择器: 空格 */
  body div {
    border: 5px solid coral;
  }

父子选择器使用类+>+标签组成

  /* 父子选择器: > */
  body > div {
    border: 5px solid coral;
  }

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

/* 同级相邻选择器 */
    .box.box1 + .box {
      background-color: lightgreen;
    }

同级所有选择器是选取指定元素下同级的所有元素。

   /*  同级所有选择器 */
    .box.box1 ~ .box {
      background-color: lightsalmon;
    }

2.举例演示结构伪类选择器（不分组）

:first-child 匹配第一个元素

<style>
/* :first-child 匹配第一个元素(第1个li标签字体红色) */
li:first-child{
  color: red;
}
</style>
<div class="box">
  <ul>
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
  </ul>
</div>

:first-child 匹配最后一个元素

<style>
/* :last-child 匹配最后一个元素(第5个li标签字体红色) */
li:last-child{
  color: red;
}
</style>
<div class="box">
  <ul>
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
  </ul>
</div>

:nth-child(索引号) 匹配指定元素

<style>
/* :nth-child(3) 匹配指定元素-索引方式:从1开始(比如：第3个li标签字体红色) */
li:nth-child(3){
  color: red;
}
</style>
<div class="box">
  <ul>
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
  </ul>
</div>

:nth-child(2n) 或 :nth-child(even) 匹配偶数元素

<style>
/* :nth-child(2n)和:nth-child(even) 匹配偶数元素(第2/4个li标签字体红色) */
li:nth-child(2n){
  color: red;
}
/* li:nth-child(even){
  color: red;
} */
</style>
<div class="box">
  <ul>
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
  </ul>
</div>

:nth-child(2n-1) 或 :nth-child(odd) 匹配奇数元素

<style>
/* :nth-child(2n-1)和:nth-child(odd) 匹配奇数元素(第1/3/5个li标签字体红色) */
/* li:nth-child(2n-1){
  color: red;
} */
li:nth-child(odd){
  color: red;
}
</style>
<div class="box">
  <ul>
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
  </ul>
</div>

其他
:nth-child(n + 索引号) 指定位置剩下的所有元素
:nth-child(-n + 索引号) 只取前几个
:nth-last-child(-n + 索引号) 只取最后几个
:nth-last-child(索引号) 倒数的方式匹配

3.结构伪类选择器(分组)

:last-of-type伪类名+标签定义例子如下：

<style>
/* 匹配span标签最后1个=3 */
.box span:last-of-type {
  color: red;
}
/* 匹配p标签最后1个=6 */
.box p:last-of-type {
  color: red;
}
</style>
<div class="box">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<p class="item">4</p>
<p class="item">5</p>
<p class="item">6</p>
</div>

4.伪类与伪元素

举例演示:target, :not, :before, :after, :focus

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>伪类与伪元素</title>
  <style>
    #login-form {
      display: none;
    }
    /* :target: 必须id配合，实现锚点操作 */
    /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
    #login-form:target {
      display: block;
    }
    /* :focus: 当获取焦点的时候执行，改变样式 */
    input:focus {
      background-color: yellow;
    }
    /* ::selection: 设置选中文本的前景色与背景色 */
    input::selection {
      color: white;
      background-color: blue;
    }
    /* :not(): 用于选择不满足条件元素 */
    .list > :not(:nth-of-type(2)) {
      color: red;
    }
    /* ::before  这里在内容就没有出现在HTML中，而是由浏览器加载样式后生成的*/
    .list::before {
      content: "我的地址管理";
      color: blue;
      font-size: 1.5rem;
      border-bottom: 1px solid #000;
    }
    /* ::after  这里在内容就没有出现在HTML中，而是由浏览器加载样式后生成的*/
    .list::after {
      content: "验证码发送中...";
      color: green;
      font-size: 1.1rem;
    }
    /* 伪元素前面是双冒号， 伪类前能是单冒号 */
  </style>
</head>
<body>
  <!-- <a href="#login-form">我要登录:</a> -->
  <button onclick="location='#login-form'">点击登录</button>
  <!-- 把按钮变成锚点，通过点击事件跳转绑定 -->
  <form action="" method="post" id="login-form">
    <label for="email">邮箱:</label>
    <input type="email" name="email" id="email" />
    <label for="password">密码:</label>
    <input type="password" name="password" id="password" />
    <button>登录</button>
  </form>
  <hr />
  <ul class="list">
    <li>地址1</li>
    <li>地址2</li>
    <li>地址3</li>
    <li>地址4</li>
    <li>地址5</li>
  </ul>
</body>
</html>

总结

伪类（前面是单冒号）

伪类	描述
:target	必须id配合，实现锚点操作
:focus	当获取焦点的时候
:not()	用于选择不满足条件元素

伪元素（前面是双冒号）

伪元素	描述
::selection	一般用于设置选中文本的前后背景色
::before	在元素前添加内容（与content一起使用）
::after	伪元素，可用于页脚等