CSS复合选择器（二）

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.mzph.cn/news/707749.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java工程师面试突击中华石杉，开发人员必学

java工程师面试突击中华石杉，开发人员必学

如何高效的学习MyBatis源码呢&#xff1f; 市面上真正适合学习的MyBatis资料太少&#xff0c;有的书或资料虽然讲得比较深入&#xff0c;但是语言晦涩难懂&#xff0c;大多数人看完这些书基本都是从入门到放弃。学透MyBatis源码难道就真的就没有一种适合大多数同学的方法吗&am…
阅读更多...
Linux系统安装使用nginx

Linux系统安装使用nginx

1.编译安装Nginx服务 (1)关闭防火墙&#xff0c;将安装nginx所需要软件包传到/opt目录下 systemctl stop firewalld systemctl disable firewalld setenforce 0 将压缩包传入到/opt目录下 cd /opt wget http://nginx.org/download/nginx-1.18.0.tar.gz (2). 安装依赖…
阅读更多...
从新手到专家：AutoCAD 完全指南

从新手到专家：AutoCAD 完全指南

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 引言 AutoCAD是一款广泛用于工程设计和绘图的…
阅读更多...
Redisson 3.18.0版本解决failover相关问题

Redisson 3.18.0版本解决failover相关问题

前言 Redisson 在历史多个版本都出现了failover期间报错的问题并且目前没有一个版本可以完全解决这个问题&#xff0c;所以在当前使用版本3.18.0基础上做了二次开发&#xff0c;达到降低业务由于redis遇到问题导致不可用。 背景 Redisson 作为业务线使用的Redis 客户端&…
阅读更多...
vue-router4 (四) 历史记录处理方法

vue-router4 (四) 历史记录处理方法

网页切换之后不想留下原页面历史记录处理方法&#xff08;比如登陆完之后不想留下登陆页面的历史记录&#xff09;&#xff1a; 1.使用router-link 标签导航&#xff0c;可在标签中添加replace 属性 <router-link replace to"/reg">Reg</router-link> …
阅读更多...
vue 中 Vue.prototype 详解及使用

vue 中 Vue.prototype 详解及使用

前言&#xff1a; 我们可能会在很多组件里用到数据/实用工具&#xff0c;但是不想污染全局作用域。这种情况下&#xff0c;可以通过在原型上定义它们使其在每个 Vue 的实例中可用。 1. 基本示例 在main.js中添加一个变量到 Vue.prototype Vue.prototype.$appName My App这样…
阅读更多...
基于JAVA的就医保险管理系统 开源项目

基于JAVA的就医保险管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 科室档案模块2.2 医生档案模块2.3 预约挂号模块2.4 我的挂号模块 三、系统展示四、核心代码4.1 用户查询全部医生4.2 新增医生4.3 查询科室4.4 新增号源4.5 预约号源 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVue…
阅读更多...
大数据相关知识

大数据相关知识

Hadoop三大组件 HDFS -- Hadoop Distributed File System Hadoop的分布式文件系统 主要负责数据的存储和管理&#xff0c;可以将大数据集分成多个数据块&#xff0c;并将这些数据块分配到不同的计算节点上存储&#xff0c;提高数据的可靠性和处理效率 MapReduce 是Hadoop的…
阅读更多...
内部控制提纲

内部控制提纲

当然&#xff0c;以下是一个更详细的关于内部控制的论文提纲&#xff1a; 一、引言 1.1 内部控制的定义与重要性 解释内部控制的基本概念和它在企业管理中的作用阐述内部控制对企业风险管理和运营效率的影响 1.2 内部控制的目标与原则 列出内部控制的主要目标&#xff0c;…
阅读更多...
使用TensorRT在PyTorch项目中加速深度学习推理

使用TensorRT在PyTorch项目中加速深度学习推理

在PyTorch项目中使用TensorRT进行深度学习推理通常涉及以下步骤&#xff1a; 模型训练&#xff1a;首先&#xff0c;在PyTorch中训练你的深度学习模型。 模型导出&#xff1a;训练完成后&#xff0c;将模型从PyTorch导出为ONNX&#xff08;Open Neural Network Exchange&#…
阅读更多...
在独立Unity工程中集成Vortex Studio

在独立Unity工程中集成Vortex Studio

本文首发于&#xff1a;Unity3D入门教程09.01&#xff1a;在独立Unity工程中集成Vortex Studio 目的 在Unity中使用Vortex Studio引擎模拟Unity场景中的任何资源。 工程 打开桌面Unity Hub快捷方式 点击Open选择需要打开的工程&#xff0c;这里选择官方提供的默认工程C:\CM…
阅读更多...
如何实现双向循环链表

如何实现双向循环链表

博主主页&#xff1a;17_Kevin-CSDN博客 收录专栏&#xff1a;《数据结构》 引言 双向带头循环链表是一种常见的数据结构&#xff0c;它具有双向遍历的特性&#xff0c;并且在表头和表尾之间形成一个循环。本文将深入探讨双向带头循环链表的结构、操作和应用场景&#xff0c;帮…
阅读更多...
【医学影像】LIDC-IDRI数据集的无痛制作

【医学影像】LIDC-IDRI数据集的无痛制作

LIDC-IDRI数据集制作 0.下载0.0 链接汇总0.1 步骤 1.合成CT图reference 0.下载 0.0 链接汇总 LIDC-IDRI官方网址&#xff1a;https://www.cancerimagingarchive.net/nbia-search/?CollectionCriteriaLIDC-IDRINBIA Data Retriever 下载链接&#xff1a;https://wiki.canceri…
阅读更多...
[java] 23种设计模式之代理模式

[java] 23种设计模式之代理模式

代理&#xff08;Proxy&#xff09;模式&#xff1a;为某对象提供一种代理以控制对该对象的访问。即客户端通过代理间接地访问该对象&#xff0c;从而限制、增强或修改该对象的一些特性。比如我们在租房子的时候会去找中介&#xff0c;为什么呢&#xff1f;因为你对该地区房屋的…
阅读更多...
Golang使用Swag搭建api文档

Golang使用Swag搭建api文档

1. 简介 Gin是Golang目前最为常用的Web框架之一。 公司项目验收需要API接口设计说明书&#xff08;Golang后端服务基于Gin框架编写&#xff09;&#xff0c;编写任务自然就落到了我们研发人员身上。 项目经理提供了文档模板&#xff0c;让我们参考模板来手动编写&#xff0c;要…
阅读更多...
如何怎麼搭建高效的爬蟲全球代理IP池？

如何怎麼搭建高效的爬蟲全球代理IP池？

爬蟲技術可以幫助我們從各類網站上獲取大量的數據資訊&#xff0c;但常常會遇到IP被封鎖的問題&#xff0c;這就是我們需要搭建全球代理IP池的原因。那麼&#xff0c;如何搭建一個高效的IP代理池呢&#xff1f; IP代理池指什麼&#xff1f; 首先&#xff0c;我們需要明白什麼是…
阅读更多...
5.WEB渗透测试-前置基础知识-常用的dos命令

5.WEB渗透测试-前置基础知识-常用的dos命令

内容参考于&#xff1a; 易锦网校会员专享课 上一篇内容&#xff1a;4.WEB渗透测试-前置基础知识-快速搭建渗透环境&#xff08;下&#xff09;-CSDN博客 常用的100个CMD指令 1.gpedit.msc—–组策略 2. sndrec32——-录音机 3. Nslookup——-IP地址侦测器 &#xff0c;是一个…
阅读更多...
Unity中的UI系统之GUI

Unity中的UI系统之GUI

目录 概述工作原理和主要作用基础控件重要参数及文本和按钮多选框和单选框输入框和拖动条图片绘制和框 复合控件工具栏和选择网络滚动视图和分组窗口 自定义整体样式自定义皮肤样式 概述 什么是UI系统 UI是User Interface&#xff08;用户界面&#xff09;的简称&#xff0c;用…
阅读更多...
全域增长方法论：帮助品牌实现科学经营，助力长效生意增长

全域增长方法论：帮助品牌实现科学经营，助力长效生意增长

前两年由于疫情反复、供给需求收缩等条件制约&#xff0c;品牌业务均受到不同程度的影响。以双十一和618电商大促为例&#xff0c;就相比往年颇显“惨淡”&#xff0c;大多品牌营销都无法达到理想预期。 随着市场环境不断开放&#xff0c;2023年营销行业开始从低迷期走上了高速…
阅读更多...
MySQL创建数据库和创建数据表

MySQL创建数据库和创建数据表

MySQL 是最常用的数据库&#xff0c;在数据库操作中&#xff0c;基本都是增删改查操作&#xff0c;简称CRUD。 在这之前&#xff0c;需要先安装好 MySQL &#xff0c;然后创建好数据库、数据表、操作用户。 一、创建数据库语法格式 我们可以在登陆 MySQL 服务后&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023