当前位置: 首页 > 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>

相关文章:

  • 深入探究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)中切换为国内的软件源
  • 甘肃白银煤矿透水事故仍有3人失联,现场约510立方米煤泥拥堵巷道
  • 聘期三年已至:37岁香港青年叶家麟卸任三亚市旅游发展局局长
  • 泽连斯基与美国副总统及国务卿会谈,讨论伊斯坦布尔谈判等问题
  • 广东高州发生山体滑坡,造成2人遇难4人送医救治1人失联
  • 广西北流出现强降雨,1人被洪水冲走已无生命体征
  • 全国林业院校校长论坛举行,聚焦林业教育的创新与突破