当前位置: 首页 > news >正文

CSS新增表单属性及结构伪类选择器(nth-child)

input表单属性

二、CSS新增属性选择器

三、CSS新增结构伪类选择器

⚠️注意:nth-child会将 父亲盒子 里的所有的 子盒子 都首先排列序号,无论是p、div等等;之后从头遍历找寻div。

这时候可以使用nth-of-type  ——>排列指定元素的序号

section div:nth-og-type(1) {background-color:blue;}

举例:

四、CSS新增伪元素选择器的基本使用

div::before  权重为2

before和after的元素盒子在浏览器的元素检查中不显示

举例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box {height: 300px;width: 300px;background-color: #900b0b;color: aliceblue;margin: 0 auto;}.box::before {/* 这个content必须存在 */content: '我';}.box::after {content: '约翰•皮耶夏特•安努•不理不理•肥嘟嘟左卫门';}
</style><body><div class="box">是</div>
</body></html>

http://www.dtcms.com/a/199624.html

相关文章:

  • 深入探究AKS Workload Identity
  • AT 指令详解:基于 MCU 的通信控制实战指南AT 指令详解
  • Linux多进程 写时拷贝 物理地址和逻辑地址
  • MATLAB中NLP工具箱支持聚类算法
  • 第 1 章:数字 I/O 与串口通信(GPIO UART)
  • 音视频之H.265/HEVC率失真优化
  • 7-2 银行业务队列简单模拟
  • HarmonyOS:应用及文件系统空间统计
  • 山东大学计算机图形学期末复习13——CG14上
  • 智能投影仪行业2025数据分析报告
  • 吉林省建筑工程专业技术人员职称评审实施办法
  • 牛客网 NC274692 题解:素世喝茶
  • 基于亚博K210开发板——安全散列算法加速器测试
  • Windows逆向工程提升之PE文件的基本概念
  • YOLOV3 深度解析:目标检测的高效利器
  • 大语言模型怎么进行记忆的
  • TDengine 安全部署配置建议
  • 人工智能、机器学习与深度学习:概念解析与内在联系
  • ALTER CONVERSION使用场景
  • 树莓派(Raspberry Pi)中切换为国内的软件源
  • CSS- 4.6 radiu、shadow、animation动画
  • Python 与 Java 在 Web 开发中的深度对比:从语言特性到生态选型
  • GPT-4.1特点?如何使用GPT-4.1模型,GPT-4.1编码和图像理解能力实例展示
  • 【SPIN】PROMELA并发编程(SPIN学习系列--3)
  • 【Dify 前端源码解读系列】聊天组件功能分析文档
  • 解决Windows磁盘管理中因夹卷导致的无法分区问题
  • go 数据类型转换
  • LeetCode-滑动窗口-找到字符串中所有字母异位词
  • 【力扣刷题】LeetCode763-划分字母区间
  • 力扣网-复写零