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

CSS复合选择器（二）

news 2025/9/1 13:00:38

CSS复合选择器（二）

    • 伪类选择器
      • 一、动态伪类：
      • 二、结构伪类
      • 三、否定伪类：
      • 四、UI伪类：
      • 五、目标伪类（了解）
      • 六、语言伪类（了解）

伪类选择器

  • 作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

  • 常用的伪类选择器：

一、动态伪类：

  1. : link 超链接未被访问的状态。
  2. :visited 超链接访问过的状态。
  3. : hover 鼠标悬停在元素上的状态。
  4. :active 元素激活的状态。

什么是激活？—— 按下鼠标不松开。
注意点：遵循LVHA 的顺序，即：link 、visited 、hover 、active 。

  1. : focus 获取焦点的元素。

表单类元素才能使用:focus 伪类。
当用户：点击元素、触摸元素、或通过键盘的 “tab ” 键等方式，选择元素时，就是获得焦点。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_动态伪类</title><style>/* 选中的是没有访问过的a元素 */a:link {color: orange;}/* 选中的是访问过的a元素 */a:visited {color: gray;}/* 选中的是鼠标悬浮状态的a元素 */a:hover {color: skyblue;}/* 选中的是激活状态的a元素 */a:active {color: green;}/* 选中的是鼠标悬浮的span元素 */span:hover {color: green;}/* 选中的是激活的span元素 */span:active {color: red;}/* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */input:focus,select:focus {color: orange;background-color: green;}</style>
</head>
<body><a href="https://www.baidu.com">去百度</a><a href="https://www.jd.com">去京东</a><span>前端</span><br><input type="text"><br><input type="text"><br><input type="text"><select><option value="beijing">北京</option><option value="shanghai">上海</option></select>
</body>
</html>

二、结构伪类

  • 常用的：
  1. :first-child 所有兄弟元素中的第一个。
  2. :last-child 所有兄弟元素中的最后一个。
  3. :nth-child(n) 所有兄弟元素中的第 n 个。
  4. :first-of-type 所有同类型兄弟元素中的第一个。
  5. :last-of-type 所有同类型兄弟元素中的最后一个。
  6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。

关于n的值：

  1. 0或不写：什么都选不中 —— 几乎不用。
  2. n：选中所有子元素 —— 几乎不用。
  3. 1~正无穷的整数 ：选中对应序号的子元素。
  4. 2n 或 even ：选中序号为偶数的子元素。
  5. 2 n+1 或 odd ：选中序号为奇数的子元素。
  6. -n+3 ：选中的是前3个。
  • 了解即可：
  1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
  2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。
  3. :only-child 选择没有兄弟的元素（独生子女）。
  4. :only-of-type 选择没有同类型兄弟的元素。
  5. : root 根元素。
  6. : empty 内容为空元素（空格也算内容）。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_结构伪类_1</title><style>/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构1 *//* div>p:first-child {color: red;} *//* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构2 *//* div>p:first-child {color: red;} *//* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 *//* div p:first-child {color: red;} *//* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */p:first-child {color: red;}</style>
</head>
<body><!-- 结构1 --><!-- <div><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div> --><!-- 结构2 --><!-- <div><span>张三：98分</span><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div> --><!-- 结构3 --><p>测试1</p><div><p>测试2</p><marquee><p>测试3</p><p>张三：98分</p></marquee><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_结构伪类_2</title><style>/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）—— 结构1*//* div>p:first-child {color: red;} *//* 选中的是div的最后一个儿子p元素（按照所有兄弟计算的）—— 结构1*//* div>p:last-child {color: red;} *//* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）—— 结构1 *//* div>p:nth-child(3) {color: red;} *//* 选中的是div的偶数个儿子p元素（按照所有兄弟计算的）—— 结构2 *//* 关于n的值 —— 结构2：1. 0或不写：什么都选不中 —— 几乎不用。2. n ：选中所有子元素  —— 几乎不用。3. 1 ~ 正无穷的整数，选中对应序号的子元素。4. 2n 或 even  ：选中序号为偶数的子元素。5. 2n+1 或 odd ：选中序号为奇数的子元素。6. -n+3 : 选中前三个。*//* div>p:nth-child(2n) {color: red;} *//* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 *//* div>p:first-of-type{color: red;} *//* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 *//* div>p:last-of-type{color: red;} *//* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 *//* div>p:nth-of-type(5) {color: red;} */</style>
</head>
<body><!-- 结构1 --><!-- <div><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p>孙七：58分</p><p>老八：48分</p></div> --><!-- 结构2 --><!-- <div><p>第1个</p><p>第2个</p><p>第3个</p><p>第4个</p><p>第5个</p><p>第6个</p><p>第7个</p><p>第8个</p><p>第9个</p><p>第10个</p></div> --><!-- 结构3 --><!-- <div><span>测试1</span><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><span>测试2</span><p>赵六：68分</p><span>测试3</span><p>孙七：58分</p><span>测试4</span><p>老八：48分</p><span>测试5</span></div> -->
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_结构伪类_3</title><style>/* 选中div中倒数第n个的儿子p元素（按照所有兄弟）—— 看结构1 *//* div>p:nth-last-child(3) {color: red;} *//* 选中div中倒数第n个的儿子p元素（按照所有同类型的兄弟）—— 看结构1 *//* div>p:nth-last-of-type(2) {color: red;} *//* 选中的是没有兄弟的span元素 —— 看结构2 *//* span:only-child {color: red;} *//* 选中的是没有同类型兄弟的span元素 —— 看结构2 *//* span:only-of-type {color: red;} *//* 选中的是根元素 *//* :root {background-color: gray;} *//* 选中的是没有内容的div元素 *//* div:empty {width: 100px;height: 100px;background-color: red;} */</style>
</head>
<body><!-- 结构1 --><!-- <div><span>测试1</span><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p>孙七：58分</p><p>老八：48分</p><span>测试2</span></div> --><!-- 结构2 --><!-- <div><span>测试1</span></div><div><span>测试2</span><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p>孙七：58分</p><p>老八：48分</p></div> --><!-- 结构3 --><div> </div>
</body>
</html>

三、否定伪类：

:not(选择器) 排除满足括号中条件的元素。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_否定伪类</title><style>/* 选中的是div的儿子p元素，但是排除类名为fail的元素 *//* div>p:not(.fail) {color: red;} *//* 选中的是div的儿子p元素，但是排除title属性值以“你要加油”开头的 *//* div>p:not([title^="你要加油"]) {color: red;} *//* 选中的是div的儿子p元素，但排除第一个儿子p元素 */div>p:not(:first-child) {color: red;}</style>
</head>
<body><div><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p class="fail" title="你要加油啊！孙七">孙七：58分</p><p class="fail" title="你要加油啊！老八">老八：48分</p></div>
</body>
</html>

四、UI伪类：

  1. :checked 被选中的复选框或单选按钮。
  2. :enable 可用的表单元素（没有 disabled 属性）。
  3. :disabled 不可用的表单元素（有disabled 属性）。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_UI伪类</title><style>/* 选中的是勾选的复选框或单选按钮 */input:checked {width: 100px;height: 100px;}/* 选中的是被禁用的input元素 */input:disabled {background-color: gray;}/* 选中的是可用的input元素 */input:enabled {background-color: green;}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="text"><input type="text" disabled>
</body>
</html>

五、目标伪类（了解）

:target 选中锚点指向的元素。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_目标伪类</title><style>div {background-color: gray;height: 300px;}div:target {background-color: green;}</style>
</head>
<body><a href="#one">去看第1个</a><a href="#two">去看第2个</a><a href="#three">去看第3个</a><a href="#four">去看第4个</a><a href="#five">去看第5个</a><a href="#six">去看第6个</a><div id="one">第1个</div><br><div id="two">第2个</div><br><div id="three">第3个</div><br><div id="four">第4个</div><br><div id="five">第5个</div><br><div id="six">第6个</div>
</body>
</html>

六、语言伪类（了解）

:lang() 根据指定的语言选择元素（本质是看lang 属性的值）。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_语言伪类</title><style>div:lang(en) {color: red;}:lang(zh-CN) {color: green;}</style>
</head>
<body><div>北京</div><div lang="en">上海</div><p>前端</p><span>你好</span>
</body>
</html>
http://www.lryc.cn/news/308153.html

相关文章：

  • Postgresql中VACUUM操作原理和应用
  • 5.1 Ajax数据爬取之初介绍
  • react-组件进阶
  • 企业有了ERP，为什么还要上BI?
  • P1331 海战
  • Orange3数据预处理(索引选择器组件)
  • Python实现时间序列分析进行平稳性检验(ADF和KPSS)和差分去趋势(adfuller和kpss算法)项目实战
  • 代码随想录 Leetcode494. 目标和
  • 【5G NR】【一文读懂系列】移动通讯中使用的信道编解码技术-NR编解码LDPC和Polar概述(一)
  • 代码库管理工具Git介绍
  • 【长期更新】游戏开发中可能会用到的数学小工具
  • 基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的活体人脸检测系统（Python+PySide6界面+训练代码）
  • 亚信安慧AntDB助力全链路实时化
  • C#进阶——反射、特性
  • UE5 C++ 发射子弹发射（Projectile）
  • 【蓝牙协议栈】【蓝牙分析工具】Ellisys 分析HCI Log和btsnoop Log
  • 亚信安慧AntDB数据库与流式处理的有机融合
  • 神经网络系列---权重初始化方法
  • 【重要公告】BSV区块链协会宣布将启动多项动态安全增强措施
  • 软件设计模式之访问者模式（Visitor Pattern）
  • 【MySQL】主从同步原理、分库分表
  • uniapp如何实现关闭前面指定数目页面
  • 使用 Helm 安装 极狐GitLab
  • K8S部署postgresql
  • Go 如何控制并发的goroutine数量?
  • 【黑马程序员】1、TypeScript介绍_黑马程序员前端TypeScript教程，TypeScript零基础入门到实战全套教程
  • JS进阶——深入对象
  • Gitlab部署管理
  • MyBatis 学习（二）之 第一个 MyBatis 案例
  • 30天自制操作系统（第21天）