CSS选择器整理学习（下）

news2024/11/15 10:03:36

        书接上回，在前端项目开发中，有时候需要对特殊的元素进行特殊的处理，但有时候元素的位置不确定、层级不确定、数量不确定等问题，导致我们没办法进行元素的选择，这个时候我们就需要用到元素选择器了。

一、css选择器

1、:last-of-type

选择器例子例子描述
:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
p:last-of-type
{ 
background:yellow;
}
</style>
</head>

<body>
<div class="test">
   <p>我是第一个</p>
   <p>我是第二个</p>
</div>
<p>我是第三个</p>


</body>
</html>

页面展示：

2、:link

代码：

<!DOCTYPE html>
<html>
<head>
<style>
a:link{
    color: red;
}
</style>
</head>

<body>
<a href="www.baidu.com">前往百度</a>


</body>
</html>

页面展示：

3、:not(p)

代码：

<!DOCTYPE html>
<html>

<head>
	<style>
		p {
			color: aqua;
		}

		:not(p) {
			color: red;
		}
	</style>
</head>

<body>
	<p>我是第一个</p>
	<p>我是第二个</p>
	<p>我是第三个</p>
	<div>1111</div>


</body>

</html>

页面展示：

4、:nth-child(n)

代码：

<!DOCTYPE html>
<html>

<head>
	<style>
		.test p:nth-child(2){
			color: red;
		}
	</style>
</head>

<body>
<div class="test">
	<p>111</p>
	<p>1111</p>
	<div>
		<p>222</p>
		<p>2222</p>
	</div>

</div>
</body>

</html>

页面展示：

5、:nth-last-child(n)

代码：

<!DOCTYPE html>
<html>

<head>
	<style>
		.test p:nth-last-child(2){
			color: red;
		}
	</style>
</head>

<body>
<div class="test">
	<p>111</p>
	<p>1111</p>
	<div>
		<p>222</p>
		<p>2222</p>
	</div>

</div>
</body>

</html>

页面展示：

 6、:nth-of-type(n)

代码：

<!DOCTYPE html>
<html>

<head>
	<style>
		p:nth-of-type(2){
			color: red;
		}
	</style>
</head>

<body>
<div class="test">
	<p>111</p>
	<div>111</div>
	<p>1111</p>
	<div>
		<p>222</p>
		<p>2222</p>
	</div>

</div>
</body>

</html>

页面展示：

7、:nth-last-of-type(n)

8、:only-of-type

代码：

<!DOCTYPE html>
<html>
<head>
<style> 
p:only-of-type
{
background:#ff0000;
}
</style>
</head>

<body>

<div>
<p>这是一个段落。</p>
</div>

<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>

</body>
</html>

页面展示：

9、:only-child

代码：

<!DOCTYPE html>
<html>
<head>
<style> 
p:only-of-type
{
background:#ff0000;
}
</style>
</head>

<body>

<div>
<div><p>这是一个段落。</p></div>
</div>

<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>

</body>
</html>

页面展示：

10、:optional

代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:optional {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>演示 :optional 选择器</h1>

<p>可选的 input 元素：<br><input></p>

<p>必填的 input 元素：<br><input required></p>

<p>:optional 选择器选取不带 "required" 属性的表单元素。</p>


</body>
</html>

页面展示：

11、:out-of-range

代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:out-of-range {
  border: 2px solid red;
}
</style>
</head>
<body>

<h1>演示 :out-of-range 选择器</h1>

<input type="number" min="5" max="10" value="17">

<p>请尝试在给定范围（5 到 10）之间输入数字，来查看样式消失。</p>

</body>
</html>

页面展示：

12、::placeholder

代码：

<!DOCTYPE html>
<html>
<head>
<style>
::-webkit-input-placeholder { /* Edge */
  color: red;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: red;
}

::placeholder {
  color: red;
}
</style>
</head>
<body>

<p>请使用 ::placeholder 选择器来改变占位文本的颜色：</p>

<input type="text" name="fname" placeholder="First name">

</body>
</html>

页面展示：

13、:read-only

代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:read-only {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>演示 :read-only 选择器</h1>

<p>普通的 input 元素：<br><input value="hello"></p>

<p>只读的 input 元素：<br><input readonly value="hello"></p>

<p>:read-only 选择器选取带有 “readonly” 属性的表单元素。</p>

</body>
</html>

页面展示：

14、:read-write 

代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:read-write {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>演示 :read-write 选择器</h1>

<p>普通的 input 元素：<br><input value="hello"></p>

<p>只读的 input 元素：<br><input readonly value="hello"></p>

<p>:read-write 选择器选取不带 “readonly” 属性的表单元素。</p>

</body>
</html>

页面展示:

15、:required

代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:required {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>演示 :required 选择器</h1>

<p>可选的 input 元素：<br><input></p>

<p>必填的 input 元素：<br><input required></p>

<p>:required 选择器选取带有 “required” 属性的表单元素。</p>

<p>Internet Explorer 9 以及更早的版本不支持 :required 选择器。</p>

</body>
</html>

页面展示：

 

 16、:root

代码：

<!DOCTYPE html>
<html>
<head>
<style> 
:root
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>

 页面展示：

 17、::selection

代码：

<!DOCTYPE html>
<html>
<head>
<style>
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
</style>
</head>
<body>

<h1>请试着选取页面上的文本</h1>

<p>这是一个段落。</p>

<div>这是 div 元素中的文本。</div>

<br>

</body>
</html>

页面展示：

 18、:target

代码：

<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

<p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

</body>
</html>

页面展示：

19、:valid 

代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:valid {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>演示 :valid 选择器</h1>

<input type="email" value="support@example.com">

<p>请尝试输入一个非法的电子邮件地址，来查看样式消失。</p>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 :valid 选择器。</p>

</body>
</html>

页面展示：

 20、:visited

代码：

<!DOCTYPE html>
<html>
<head>
<style>
a:visited
{
background-color:yellow;
}
</style>
</head>
<body>

<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>

<p><b>注释：</b>:visited 选择器为已被访问的链接设置样式。</p>

</body>
</html>

页面展示：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/188646.html

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

相关文章

ESP-IDF:懒汉式和饿汉式单例模式测试代码

ESP-IDF:懒汉式和饿汉式单例模式测试代码

ESP-IDF:懒汉式和饿汉式单例模式测试代码 /单例模式测试/ /懒汉式/ class singleton_lazy { private: singleton_lazy(){}; public: static singleton_lazy *getinstance(){ if (pSingleton NULL){ pSingleton new singleton_lazy; } return pSingleton; } private: stati…
阅读更多...
美摄云剪辑3.0：融合AIGC，实现效率提升

美摄云剪辑3.0：融合AIGC，实现效率提升

云剪辑3.0亮点速览 数字人视频一键生成本地素材剪辑无需等待上传支持Lottie动画导入01 模板化包装&#xff0c;一键生成数字人视频 伴随元宇宙技术的发展和产业数字化升级&#xff0c;数字人正在成为下一代互联网的基础设施。与此同时&#xff0c;AI的应用场景也愈加丰富。人…
阅读更多...
网站被劫持的解决方案

网站被劫持的解决方案

网站被劫持怎么解决?用户打开网站就发现网站被篡改不是自己原来的页面&#xff0c;而是被变成被劫持的页面&#xff0c;以下几种情况以及对应的处理方法&#xff0c;一起来看看吧。 一、DNS劫持 DNS劫持是一种恶意攻击&#xff0c;其中&#xff0c;个人通过覆盖计算机的传输控…
阅读更多...
TCP/IP详解与实例分析

TCP/IP详解与实例分析

TCP/IP详解 TCP/IP并不是一个具体的协议&#xff0c;而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇&#xff0c;只是因为在TCP/IP协议中TCP协议和IP协议最具代表性&#xff0c;所以被称为TCP/IP协议。 TCP/IP协议在一定程度上参考了OSI的体系结构&#xff0c;在TCP/…
阅读更多...
前端面试题2023含答案 前端必备知识点 混淆 刷题 查漏补缺【持续更新中】

前端面试题2023含答案 前端必备知识点 混淆 刷题 查漏补缺【持续更新中】

目录1. vue双向数据绑定&#xff08;响应式&#xff09;原理2. HTML 语义化&#xff08;语义化标签&#xff09;3. 标签上 title 与 alt 属性4. CSS单位&#xff1a;1px、1em、1rem、1vh / 1vw 的含义5. 网页前端性能优化的方式6. HTTP常见的状态码7. Vuex是什么&#xff08;有…
阅读更多...
基于卡尔曼滤波器的PID控制-2

基于卡尔曼滤波器的PID控制-2

采用Simulink进行仿真&#xff01;&#xff01;Kalman算法由M函数实现。控制干扰信号wk)和测量噪声信号v(k)幅值均为0.10的白噪声信号&#xff0c;输入信号幅值为1.0、频率为0.5Hz 的正弦信号。采用卡尔曼滤波器实现信号的滤波,取O1&#xff0c;R1。仿真结果如图1和2所示。图1 …
阅读更多...
PyQt5编程基础 2.1 GUI程序的基本框架

PyQt5编程基础 2.1 GUI程序的基本框架

文章目录 创建纯代码GUI程序 创建目录 新建程序 创建GUI程序的基本过程(代码分析) 导入模块 创建应用程序 创建窗体 使用窗体类的GUI程序框架 创建项目目录 窗体设计 修改窗体的windowTitle 放一个label 放一个Push Button 保存窗体 代码设计 将QtApp中的ui文…
阅读更多...
【自学Docker】Docker update命令

【自学Docker】Docker update命令

Docker update命令 大纲 docker update命令教程 docker update 命令可以用于更新一个或多个 Docker容器 的配置。该命令后面的 CONTAINER 可以是容器Id&#xff0c;或者是容器名。 docker update命令语法 haicoder(www.haicoder.net)# docker update [OPTIONS] CONTAINER […
阅读更多...
网络编程套接字之UDP实现回显服务器及客户端

网络编程套接字之UDP实现回显服务器及客户端

目录 前言&#xff1a; 基础理解 传输层协议 UDP TCP Socket API DatagramSocket API DatagramPacket API UDP实现回显服务器 完整代码展现&#xff08;有详细注释&#xff09; UDP实现回显客户端 完整代码展现&#xff08;有详细注释&#xff09; 小结&#xff1…
阅读更多...
使用OpenCV对点集从左上到右下排序

使用OpenCV对点集从左上到右下排序

本文实现如何使用OpenCV对点集从左上到右下排序。本文使用的案例图片如下&#xff1a; 需要实现的效果如下&#xff1a; 1.分阶段实现 让我们看看考虑4行的工作流。我考虑的是沿着y轴将图像分成4段&#xff0c;形成4行。对于图像的每一段&#xff0c;找出每一个以该段为中心…
阅读更多...
虚拟主机怎么用？香港虚拟主机搭建网站教程

虚拟主机怎么用？香港虚拟主机搭建网站教程

在了解使用方法之前要先明白什么是虚拟主机、它的用处以及服务器、VPS和虚拟主机之间有什么区别。香港虚拟主机也称为网站空间&#xff0c;顾名思义就是存放网站文件的空间。主要用于搭建网站、提供程序运行。下面就介绍一下香港虚拟主机搭建网站的使用方法以及教程。 一、香港…
阅读更多...
职场新人应该如何培养项目管理的能力？

职场新人应该如何培养项目管理的能力？

李强在一家企业工作&#xff0c;前阵子升任项目经理。但他这两天却一副愁眉不展的样子&#xff0c;像霜打的茄子。原来是因为他缺乏管理经验&#xff0c;设定的工作任务不合理&#xff0c;项目成员职责不清&#xff0c;导致项目混乱&#xff0c;项目进度不清晰。 项目管理涉及…
阅读更多...
Redis搭建基于docker跨服务器的一主两从三哨兵集群模式

Redis搭建基于docker跨服务器的一主两从三哨兵集群模式

文章目录1 整体拓扑图2 redis与哨兵配置文件2.1 主节点配置文件2.1.1 主节点redis.conf配置文件2.1.2 主节点哨兵配置文件2.2 从节点配置文件2.1.1 从节点redis.conf配置文件2.1.2 从节点哨兵配置文件3 docke-compose编排文件4 启动并测试查看哨兵日志查看集群状态测试集群是否…
阅读更多...
在 Visual Studio 中更好地进行搜索

在 Visual Studio 中更好地进行搜索

当在 IDE 中查找特定的代码文件、类、方法或者功能、选项&#xff0c;找到它们并不总是那么容易。有多种搜索方式&#xff0c;到底该选择哪一种才最便捷呢&#xff1f;新的“一站式”搜索&#xff08;All-In-One Search&#xff09;将代码和功能搜索合并到同一个 UI 中&#xf…
阅读更多...
从GPT到chatGPT（三）：GPT3（一）

从GPT到chatGPT（三）：GPT3（一）

#GPT3 文章目录前言正文摘要介绍方法模型结构训练数据集训练过程评估小结前言 OpenAI在放出GPT2后&#xff0c;并没有引起业界太大的影响和关注&#xff0c;究其原因&#xff0c;并不是zero-shot这种想法不够吸引人&#xff0c;而是GPT2表现出来的效果依然差强人意&#xff0c…
阅读更多...
Unity数据持久化-PlayerPrefs

Unity数据持久化-PlayerPrefs

1. PlayerPrefs 是什么&#xff1f; 是Unity提供的可以用于存储读取玩家数据的公共类 1.1. 存储相关 PlayerPrefs的数据存储类似于键值对存储 一个键对应一个值 提供了存储3种数据的方法int float string 键:string类型 值: int float string对应3种API PlayerPrefs.SetInt(…
阅读更多...
如何将宿主机工作文件夹映射到vmware虚拟机内

如何将宿主机工作文件夹映射到vmware虚拟机内

将宿主机工作文件夹映射到vmware虚拟机内vmware启用共享文件夹在虚拟机中使用vmtools进行挂载虚拟机为linux系统&#xff0c;操作中使用的是凝思系统 vmware启用共享文件夹 在vmware中将需要共享的工作文件夹添加到共享列表中&#xff0c;如图 在虚拟机中使用vmtools进行挂…
阅读更多...
Tomcat部署项目及Tomcat间会话同步

Tomcat部署项目及Tomcat间会话同步

目录一、Tomcat中部署项目的相关配置1.相关配置2.测试二、Tomcat间的会话同步1.配置Tomcat2.修改web工程的WEB-INF下的web.xml3.配置Nginx4.测试一、Tomcat中部署项目的相关配置 1.相关配置 在Tomcat中进入conf/tomcat-users.xml文件&#xff0c;将以下代码放到最后 <rol…
阅读更多...
本地Exchange备份方案

本地Exchange备份方案

Exchange Server的Windows服务器备份只能执行基础还原&#xff0c;并且不支持对邮箱项执行粒度还原。在需要恢复单个已删除的电子邮件或文件夹的情况下&#xff0c;本机解决方案提供了一个耗时且低效的过程。Exchange ServerRecoveryManager Plus帮助您克服这些限制。使用Recov…
阅读更多...
国内有哪些移动开发平台？各有什么特点

国内有哪些移动开发平台？各有什么特点

开年找解决方案的时候接触了一批移动开发平台&#xff0c;猛然发现近几年移动开发平台如雨后春笋般出现&#xff0c;于是乎就想针对市场上越来越多的移动开发平台做一次盘点对比&#xff0c;看看他们的基本情况和自身特点优势&#xff0c;也希望能够对有需要的开发者有一定的参…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023