HTML + CSS 连载 | 38 - 否定伪类

最新推荐文章于 2024-08-19 17:16:10 发布
最新推荐文章于 2024-08-19 17:16:10 发布
阅读量49 收藏
点赞数
分类专栏： HTML2CSS 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JingnanJia/article/details/134150516
版权

html+css.jpeg

一、结构伪类 - :nth-of-type()

:nth-of-type() 的用法与 :nth-child() 用法类似，不同的是 :nth-of-type() 在计数时只计算同种类型的元素。

创建 HTML 页面，首先使用 :nth-child() 来选择元素，具体代码如下：

<!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>
    /*需求：选择 box 中的第三个 div 元素*/
    .box > div:nth-child(3) {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>我是div1</div>
    <p>我是p</p>
    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
    <div>我是div5</div>
    <div>我是div6</div>
    <div>我是div7</div>
    <div>我是div8</div>
    <div>我是div9</div>
    <div>我是div10</div>
  </div>
</body>
</html>

在浏览器中打开页面，具体效果如下：

image.png

可以看到并没有选中我们想要的元素，那么如果我们使用 :nth-of-type() 这个结构伪类来选择第三个元素会不会选中？

在 HTML 中增加如下 CSS 代码：

    /*使用 nth-of-type：计数时只会统计同类元素*/
    /*而 nth-child：计数时会统计所有类型元素*/
    .box > div:nth-of-type(3) {
      color: red;
    }

刷新页面，效果如下：

image.png

可以看到使用 :nth-of-type() 结构伪类是可以实现我们的需求的。

除此之外还有 :nth-last-of-type() 用法与 :nth-of-type() 用法类似，不同点是 :nth-last-of-type() 从最后一个相同的元素开始往前计数。

二、其他常见的结构伪类

除了前面提到的四个需要传递参数的结构伪类外，还有以下几个常用的结构伪类，这些结构伪类是不需要传递参数的，具体有：

  • :first-child：是父元素中的第一个元素，等同于 :nth-child(1)
  • :last-child：是父元素中最后一个元素，等同于 :nth-last-child(1)
  • :first-of-type：是父元素中第一个相同类型的元素，等同于 :nth-of-type(1)
  • :last-of-type：是父元素中最后一个相同类型的元素，等同于 :nth-last-of-type(1)
  • :only-child：是父元素中唯一的子元素
  • :only-of-type：是父元素中唯一的这种类型的子元素

创建 HTML 页面，使用这些结构伪类，具体代码如下：

<!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>
    .box > div:first-child {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>我是span</span>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
    <div>我是div5</div>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

image.png

这里并没有选中第一个元素，因为第一个元素是 span 元素，而选择器中限定了只能是 div 元素，我们可以稍微修改一下选择器，把 div 的限制去掉：

.box :first-child {
  color: red;
}

刷新页面，具体效果如下：

image.png

可以看到这就选中了第一个元素。

创建 HTML 页面，在该页面中使用 :only-child 结构伪类，具体代码如下：

<!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>
    .box :first-child {
      color: red;
    }

    .box > :only-child {
      font-size: 20px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>我是span</span>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
    <div>我是div5</div>
  </div>

  <div class="box">
    <div>box中唯一的div</div>
  </div>

  <div class="box">
    <div>box中的div</div>
    <div>box中的div</div>
  </div>
</body>
</html>

在浏览器中工打开页面，效果如下：

image.png

可以看到 :only-child 伪类选中了父元素中唯一的一个子元素，我们来修改一下 HTML 结构，修改父元素中有多个子元素，不再唯一：

  <div class="box">
    <div>box中的唯一的div</div>
    <span>box中唯一的span</span>
  </div>

刷新页面，效果如下：

image.png

可以看到，当父元素中有多个子元素时，:only-child 便无法选中，但是如果元素类型是唯一的，我们可以使用 only-of-type 来选中唯一类型的元素：

    .box > :only-of-type {
      color: antiquewhite;
    }

刷新页面，效果如下：

image.png

还有其他一些结构伪类偶尔使用：

  • :root：根元素，就是指 HTML 元素
  • :empty：表示里面完全是空白的元素

在上述的页面中使用这两个结构伪类，具体代码如下：

<!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>
    .box :first-child {
      color: red;
    }

    .box > :only-child {
      font-size: 20px;
      font-weight: 700;
    }

    .box > :only-of-type {
      color: antiquewhite;
    }

    :root {
      font-size: 30px;
    }

    :empty {
      width: 100px;
      height: 100px;
      background-color: #f0f;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>我是span</span>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
    <div>我是div4</div>
    <div>我是div5</div>
  </div>

  <div class="box">
    <div>box中的唯一的div</div>
    <span>box中唯一的span</span>
  </div>

  <div class="box">
    <div>box中的div</div>
    <div>box中的div</div>
  </div>

  <div class="container"></div>
</body>
</html>

刷新页面，效果如下：

image.png

三、否定伪类

not()表示否定选择器，即排除或者过滤掉特定元素。前面介绍的选择器都是匹配操作，而唯独:not()操作相反，它表示过滤操作，与JQuery中的:not选择器用法相同。

否定选择器:not()可以帮助用户定位不匹配该选择器的元素，实现匹配操作后的二次过滤。

:not() 的格式是 :not(x)。

x 是一个简单选择器，包括了元素选择器、通用选择器、属性选择器、类选择器、id 选择器 和伪类（除了否定伪类）。

创建 HTML 页面，使用否定选择器，具体 HTML 代码如下：

<!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>
    /*除了 .info 外，其他的全部设置大括号中的属性*/
    .box :not(.info) {
      color: aquamarine;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">我是div1</div>
    <div class="info">我是info</div>
    <div class="item">我是div2</div>
    <div class="item">我是div3</div>
    <div class="item">我是div4</div>
    <div class="item">我是div5</div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

image.png

Riemann Hypothesis
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个简单炫酷的前端小项目（html+css+js）----3D图片演示
m0_54850467的博客
03-06 6750
一个简单炫酷的特效页面（html+css+js 含源码）----3D图片演示 前言 一、页面特效效果展示 二、功能描述 1、打开页面，所有图片会自动转动 2、图片的大小和间隔可随鼠标滚轮滚动而改变 3、鼠标按住页面任意位置，拖动光标，页面可随之旋转 三、功能实现 1.创建一个父容器，将所有照片叠放在一起 2.给所有照片加上旋转动画 3.监听鼠标事件 总结 前言 对于学前端的小伙伴来说，吸引你们入坑的大都是一些炫酷的页面。但往往那些页面的源代码对初学的伙伴们都不太友好。今
「HTML+CSS」--自定义按钮样式【001】
海到无边天作岸 山登绝顶我为峰
03-27 7126
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 上面效果可以概括为： 鼠标未停
HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
weixin_47781785的博客
06-14 8万+
web前端开发技术期末大作业 网页规划与制造，做得不深 但是还是满足期末大作业的 分享一下 题目： 此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术（如结合使用CSS及表格、DIV、框架等技术），完成各页面的布局设计。 工具： EditPlus 一、网页效果（模仿游戏官网） A.首页效果 B.游戏攻略 C.手办商城 上面就是网站的部分效果，其他就不贴出来了哈哈哈，仅作分享 二、主要代码 首页HTML <!DOCTY
web前端基础（一）——HTML+CSS
广龙宇的博客
08-18 14万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
「HTML+CSS」--自定义按钮样式【002】
海到无边天作岸 山登绝顶我为峰
03-29 2467
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 上面效果可以概括为： 鼠标未停
html css链接伪类大全,什么是css链接伪类？
weixin_42515158的博客
06-28 1541
什么是css链接伪类？下面本篇文章就来给大家介绍一下css链接伪类是什么？有哪些？有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。什么是css链接伪类？css链接伪类就是css内置类，css内部本身赋予它一些特性和功能，用于向链接添加特殊的效果。css链接伪类是用来给链接添加特殊效果。CSS伪类是用来添加一些选择器的特殊效果，是用于已有元素处于某种状态时为其添加对应的样式，这个状态...
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 27万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
css常用代码大全,html+css代码
xujiuba的博客
12-28 11万+
css常用代码大全，html+css代码 html+css可以很方便的进行网页的排版布局，还能减少很多不必要的代码。 一.文本设置 1、font-size: 字号参数  2、font-style: 字体格式 3、font-weight: 字体粗细 4、颜色属性 color: 参数 注意使用网页安全色 二、超链接设置 text-de
web前端——HTML+CSS
m0_64378422的博客
02-10 3367
web前端——HTML+CSS
HTML+CSS+JavaScript入门教程（万字）
lsl5713的博客
11-24 9798
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML（HyperText Markup Language）:超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言：由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如：使用展示图片W3C标准：网页主要由三部分组成HTMLCSSJavaScipt。
响应式Web设计：纯HTML和CSS的实现技巧
Caleb的博客
08-16 743
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
JS（三）——更改html内数据
初叙
08-15 279
JavaScript更改html内数据
加速网页加载，提升用户体验：HTML、JS 和 Vue 项目优化全攻略
服务员的博客
08-16 824
除了以上列出的方法，还有很多其他的优化技巧，例如使用 CDN 加速、HTTP/2 协议、Service Worker 缓存等等。在信息爆炸的时代，网页加载速度成为了用户体验的重中之重。为了留住用户，提升转化率，网页优化势在必行！网页优化是一个持续的过程，需要不断学习和实践。通过以上方法，你可以有效提升网页加载速度，为用户提供更流畅的体验，最终实现更高的转化率和用户满意度。本文将从 HTML、JavaScript 和 Vue 项目三个方面，为你提供一份全面的网页优化指南，助你打造闪电般的加载速度！
html转vue项目
最新发布
qq_38880880的博客
08-19 195
总结来说，将HTML代码转换为Vue需要引入Vue框架并编写Vue组件，使用Vue的数据绑定和事件绑定语法实现页面的动态更新。当我们点击"Change Name"按钮时，changeName方法会被调用，将name属性的值改为"Vue.js"。在Vue的data选项中，我们定义了一个name属性，并将其初始值设为"Vue"。除了简单的数据绑定和事件绑定外，Vue还提供了丰富的指令和组件库，用于构建更复杂的用户界面。通过使用这些特性，我们可以将HTML代码转换为更加动态和交互的Vue应用。
JavaScript HTML DOM 实例
wjs2024的博客
08-16 408
通过这些实例，我们可以看到JavaScript HTML DOM的强大功能。它可以让我们动态地添加、修改和删除页面元素，以及响应用户的交互操作。掌握DOM操作是前端开发的重要技能之一，希望这些实例能帮助您更好地理解和应用DOM操作。
会员注册表单包括先写基础信息，地址选择，上传文件，填写身份证号等功能JavaScript+HTML
weixin_68441705的博客
08-15 691
基础信息，比如用户名、密码等都使用正则表达式在JS中实现，地址采用省市区三级联动，包括了全部地区，身份证号也是适用正则进行验证的。比较基础，适合刚开始接触前端的小白（因为我就是）
HTML 的 ＜a＞ 标签简单介绍
qq_48763502的博客
08-19 292
HTML 的。
自动化之响应式Web设计:纯HTML和CSS的实现技巧
yang_xs的博客
08-16 806
响应式Web设计是一种使Web页面在各种设备和屏幕尺寸下都能良好显示的设计方法。随着移动设备的普及，响应式设计已经成为Web开发中的标准实践。本文将探讨如何使用纯HTML和CSS实现响应式Web设计，覆盖常用的技巧和最佳实践，帮助开发者创建适应不同屏幕尺寸的Web页面。
day01- Web开发介绍-HTML-CS
2303_80556719的博客
08-17 938
我们介绍Web网站工作流程的时候提到，前端开发，主要的职责就是将数据以好看的样式呈现出来。说白了，就是开发网页程序，如下图所示：那在讲解web前端开发之前，我们先需要对web前端开发有一个整体的认知。主要明确一下三个问题：1). 网页有哪些部分组成?文字、图片、音频、视频、超链接、表格等等。2). 我们看到的网页，背后的本质是什么?程序员写的前端代码 (备注：在前后端分离的开发模式中，)3). 前端的代码是如何转换成用户眼中的网页的?通过浏览器转化（解析和渲染）成用户看到的网页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值