CSS选择器整理学习（中）

news2024/11/24 6:56:05

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

一、CSS选择器

1、:active

选择器例子例子描述
:activea:active选择活动连接，点击是激活样式。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</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>
</body>
</html>
<style>
a:active{
    color: aqua;
}
</style>

页面展示：

 2、::after

 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>元素1</p>
    <p>元素2</p>
    <p>元素3</p>
</body>
</html>
<style>
p::after{
    content: '我是文字显示';
    background: red;
    color: aqua;
}
</style>

页面展示：

3、 ::before

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>元素1</p>
    <p>元素2</p>
    <p>元素3</p>
</body>
</html>
<style>
p::before{
    content: '我是文字显示';
    background: red;
    color: aqua;
}
</style>

页面展示：

4、 :checked

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
        <input type="radio" value="female" name="gender" /> Female<br>
        <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
        <input type="checkbox" value="Car" /> I have a car 
        </form>
        
        <p><b>注释：</b>本例只在 Opera 中正确地工作！</p>
</body>
</html>
<style>
input:checked{
background:#ff0000;
}
</style>

页面展示：

5、:default

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="radio" name="gender" value="male" checked> 男性<br>
        <input type="radio" name="gender" value="female"> 女性<br>
        <input type="radio" name="gender" value="other"> 其他
      </form>
</body>
</html>
<style>
input:default {
    box-shadow: 0 0 1px 1px red;
    width: 20px;

}
</style>

 页面展示：

6、:disabled

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="radio" name="gender" value="male" disabled> 男性<br>
        <input type="radio" name="gender" value="female"> 女性<br>
        <input type="radio" name="gender" value="other"> 其他
      </form>
</body>
</html>
<style>
input:disabled {
    box-shadow: 0 0 1px 1px red;
    width: 20px;

}
</style>

页面展示：

7、:empty

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>第一个段落。</p>
    <p></p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
</body>
</html>
<style>
p:empty{
    height: 10px;
    background: red;
}
</style>

页面展示：

8、:enabled

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        First name: <input type="text" value="Mickey" /><br>
        Last name: <input type="text" value="Mouse" /><br>
        Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
        </form>
</body>
</html>
<style>
input:enabled{
background:#ffff00;
}
</style>

页面展示：

9、:first-child

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这个段落是其父元素（body）的首个子元素。</p>

    <h1>欢迎访问我的主页</h1>
    <p>这个段落不是其父元素的首个子元素。</p>
    
    <div>
    <p>这个段落是其父元素（div）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
    </div>
</body>
</html>
<style>
p:first-child{
background-color:yellow;
}
</style>

页面展示：

10、::first-letter

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这个段落是其父元素（body）的首个子元素。</p>

    <h1>欢迎访问我的主页</h1>
    <p>这个段落不是其父元素的首个子元素。</p>
    
    <div>
    <p>这个段落是其父元素（div）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
    </div>
</body>
</html>
<style>
p::first-letter{
background-color:yellow;
}
</style>

页面展示：

11、::first-line

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这个段落是其父元素（body）的首个子元素。<br>
        123456
    </p>

    <h1>欢迎访问我的主页</h1>
    <p>这个段落不是其父元素的首个子元素。</p>
    
    <div>
    <p>这个段落是其父元素（div）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
    </div>
</body>
</html>
<style>
p::first-line{
background-color:yellow;
}
</style>

页面展示：

 12、:first-of-type

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这个段落是其父元素（body）的首个子元素。
        <p>123456</p>
    </p>

    <h1>欢迎访问我的主页</h1>
    <p>这个段落不是其父元素的首个子元素。</p>
    
    <div>
    <p>这个段落是其父元素（div）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
    </div>
</body>
</html>
<style>
p:first-of-type{
background-color:yellow;
}
</style>

页面展示：

13、:focus

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"  />
</body>
</html>
<style>
input:focus{
    background: red;
}
</style>

页面展示：

 14、:fullscreen

代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Safari 语法 */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 语法 */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard 语法 */
:fullscreen {
  background-color: yellow;
}

/* 设置按钮的样式 */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>全屏模式</h1>
<p>单击“打开全屏模式”按钮以全屏模式打开此页面。通过单击键盘上的“Esc”键或使用“关闭全屏模式”按钮将其关闭。</p>

<button onclick="openFullscreen();">打开全屏模式</button>
<button onclick="closeFullscreen();">关闭全屏模式</button>

<script>
// 使用 JavaScript 在全屏模式中打开页面
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

<p>注释：Internet Explorer 10 以及更早的版本不支持全面模式。</p>

</body>
</html>

页面展示：

15、:hover

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href=""  >我是一个链接</a>
</body>
</html>
<style>
a:hover{
    background: red;
}
</style>

页面展示：

16、:in-range 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="number" min="5" max="10" value="7">
    <p>请尝试输入超出范围的数字（小于 5 或大于 10），来查看消失的样式。</p>
</body>
</html>
<style>
input:in-range {
  border: 2px solid yellow;
}
</style>

页面展示：

 17、:indeterminate

代码：

<!DOCTYPE html>
<html>
<head>
<style> 
input:indeterminate {
  box-shadow: 0 0 1px 1px red;
}
</style>
</head>
<body>

<h1>indeterminate 选择器</h1>
<p>下面的复选框处于不确定状态（通过 JavaScript）。如果单击它，它的状态将变为“已选中”，并失去其红色阴影颜色，因为它不再是不确定的。</p>
<p>请注意，不确定的复选框拥有“-”图标，而不是复选标记或空白框。</p>

<input type="checkbox" id="myCheckbox"> 复选框

<script>
// 通过 JavaScript 使复选框处于不确定状态
var checkbox = document.getElementById("myCheckbox");
checkbox.indeterminate = true;
</script>

</body>
</html>

页面展示：

 18、:invalid

代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:invalid {
  border: 2px solid red;
}
</style>
</head>
<body>

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

<input type="email" value="supportEmail">

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

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

</body>
</html>

页面展示：

19、:lang(language)

代码：

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(en)
{ 
background:yellow;
}
</style>
</head>

<body>

<p>我是唐老鸭。</p>
<p lang="en">I live in Duckburg.</p>

<p><b>注释：</b>对于在 IE8 中工作的 :lang，必须声明 DOCTYPE。</p>

</body>
</html>

页面展示：

20、:last-child

代码：

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

<body>

<p>我是唐老鸭。</p>
<p lang="en">I live in Duckburg.</p>

<p><b>注释：</b>对于在 IE8 中工作的 :lang，必须声明 DOCTYPE。</p>

</body>
</html>

页面展示：

 

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

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

相关文章

加油站视频监控智能分析盒基于yolov5

加油站视频监控智能分析盒基于yolov5

加油站视频监控智能分析盒基于yolov5人工智能视觉技术&#xff0c;对现场画面中明火和烟雾以及人员抽烟、打电话等违规行为进行识别。除此之外&#xff0c;还可以对现场画面中卸油时灭火器未按要求正确摆放以及静电释放时间不足和人员离岗等不规范行为进行自动预警。YOLOv5在YO…
阅读更多...
【云原生】k8s图形化管理攻击之rancher

【云原生】k8s图形化管理攻击之rancher

内容预知 前言 1. Rancher的相关知识 1.1 Rancher的简介 1.2 Rancher与k8s的关系及区别 1.3 Rancher具有的优势 2. Rancher的安装部署 2.1 实验环境与部署图分配 2.2 具体的部署操作 &#xff08;1&#xff09;在 rancher 节点下载 rancher 镜像 &#xff08;2&#xff…
阅读更多...
程序员同事每天准点下班，原来是用了这6个开发工具

程序员同事每天准点下班，原来是用了这6个开发工具

工欲善其事必先利其器&#xff0c;要想更加高效的做事情&#xff0c;就得先将工具变得锋利。那么对于程序员来说同样也是如此&#xff0c;如果要想每天早点下班&#xff0c;就必须借助于一些开发工具来提高自己的工作效率&#xff0c;今天就给大家总结一些工作中常用到的工具。…
阅读更多...
【算法题解】11. 判断链表是否有环，并返回入环节点

【算法题解】11. 判断链表是否有环，并返回入环节点

文章目录题目解法一&#xff1a;循环标记Java代码实现Go 代码实现复杂度分析解法二&#xff1a;快慢指针Java 代码实现Go 代码实现复杂度分析这是一道 中等难度 的题&#xff0c;是 判断链表是否有环 的扩展&#xff0c;在有环的情况下返回入环节点&#xff0c; 依然是两种解法…
阅读更多...
Disney 流媒体广告 Flink 的应用实践

Disney 流媒体广告 Flink 的应用实践

摘要&#xff1a;本文整理自 Disney 广告智能执行总监郝又超、Disney 广告智能实时计算负责人李丁哲&#xff0c;在 FFA 主会场的分享。本篇内容主要分为四个部分&#xff1a;Disney 流媒体广告与实时应用业务场景实现实时平台构建未来展望Tips&#xff1a;点击「阅读原文」查看…
阅读更多...
kafka.2 集群搭建

kafka.2 集群搭建

文章目录1.启动kakfa自带的zk2.启动kafka集群3.查看zookeeper的kafka节点信息启停kafka集群脚本创建主题增加分区模拟生产消费模拟消费组消费主题&#xff0c;查看offset1.启动kakfa自带的zk 参考&#xff1a;https://blog.csdn.net/justlpf/article/details/127261664?utm_m…
阅读更多...
通俗易懂的java设计模式（7）-原型模式

通俗易懂的java设计模式（7）-原型模式

1.什么是原型模式&#xff1f; 原型模式提供了一种创建对象的模式&#xff0c;它是指用原型实例创建对象的种类&#xff0c;并且通过拷贝这些原型&#xff0c;创建新的对象。用一个很生动形象的例子&#xff1a;孙悟空拔出一根猴毛&#xff0c;变出其他和自己一模一样的小孙悟…
阅读更多...
Linux三剑客之Sed

Linux三剑客之Sed

目录 一、认识sed 二、使用sed 命令格式 常用选项options 地址定界 编辑命令command sed用法 常用选项&#xff1a; 地址界定演示 编辑命令command演示 sed高级编辑命令 一、认识sed sed 是一种流编辑器&#xff0c;它一次处理一行内容。处理时&#xff0c;把当前处理的行…
阅读更多...
《Linux Shell脚本攻略》学习笔记-第九章

《Linux Shell脚本攻略》学习笔记-第九章

9.1 简介 计算机系统是由一组硬件及控制这些硬件的软件组成的。 Linux既提供了能够检查这些系统当前性能的交互式程序&#xff0c;也提供了用于记录一段时间内系统性能表现的模块。 9.2 监视磁盘使用情况 磁盘空间是一种有限的资源。 du和df命令可以报告磁盘使用情况&#xff0…
阅读更多...
消息中间件如何选型 图解 Kafka vs RabbitMQ vs RocketMQ 的差异

消息中间件如何选型 图解 Kafka vs RabbitMQ vs RocketMQ 的差异

综述 Kafka 采用拉取 ( Pull) 方式消费消息&#xff0c;吞吐量相对更高&#xff0c;适合海量数据收集与传递场景&#xff0c;例如日志采集和集中分析缺点 Kafka 单机超过 64 个队列/分区&#xff0c;Load 会发生明显的飙高现象&#xff0c;队列越多&#xff0c;load 越高&#…
阅读更多...
linux基本功系列之chage命令实战

linux基本功系列之chage命令实战

文章目录前言一. chage命令的介绍二. 常用案例示范1. 查看用户密码的有效期2. 设置密码的过期时间3. 设置账号的失效时间总结前言 前言&#x1f680;&#x1f680;&#x1f680; 想要学好Linux&#xff0c;命令是基本功&#xff0c;企业中常用的命令大约200多个&#xff0c;不管…
阅读更多...
2023牛客寒假算法基础集训营1

2023牛客寒假算法基础集训营1

题解 | #2023牛客寒假算法基础集训营1#_牛客博客 (nowcoder.net) //本人能力有限&#xff0c;以下只附上本人get到的题&#xff0c;其他参考以上链接或其他 A World Final? World Cup! (I) 链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 …
阅读更多...
【自学Docker 】Docker top命令

【自学Docker 】Docker top命令

Docker top命令 大纲 docker top教程 使用 docker top 命令可以用来查看 Docker 中运行的进程信息。docker top 命令后面的 CONTAINER 可以是容器 ID&#xff0c;或者是容器名。 docker top语法 haicoder(www.haicoder.net)# docker top [OPTIONS] CONTAINER [ps OPTIONS]案…
阅读更多...
说话的三重复杂性

说话的三重复杂性

从0开始首先要有一个说话者&#xff0c;这个说话者说出来的话有三重有意。说话者想要表达的东西。文字本身的意义。倾听者所理解的意义。例子&#xff1a;说话者问&#xff1a;有女朋友吗&#xff1f;我们假设说话者要表达&#xff0c;如果还没&#xff0c;那么一起加班。文字本…
阅读更多...
GIS入门进阶之017

GIS入门进阶之017

一、网络分析 网络分析是ArcGIS提供的重要的空间分析功能&#xff0c;利用它可以模拟现实世界的网络问题。如从网络数据中寻找多个地点之间的最优路径&#xff0c;确定网络中资源的流动方向、资源配置和网络服务范围等。 网络是图论和运筹学中的一个数学模型&#xff0c;通常用…
阅读更多...
【C#】封装.net framework函数库，并打包发布dll函数库到nuget服务器

【C#】封装.net framework函数库，并打包发布dll函数库到nuget服务器

作者&#xff1a;小5聊 简介&#xff1a;一只喜欢全栈方向的程序员&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff0c;尽绵薄之力答疑解惑&#xff01; 1、Nuget函数库管理工具 1.1、什么是Nuget Nuget是一个.NET平台下的开源的项目&#xff0c;它是Visual Stu…
阅读更多...
电脑怎么设置定时关机？分享2个简单操作！

电脑怎么设置定时关机？分享2个简单操作！

随着互联网时代的发展&#xff0c;越来越多人使用电脑。使用过程中&#xff0c;有时会产生很多疑惑&#xff0c;其中有朋友问小编&#xff1a;电脑怎么设置定时关机&#xff1f;其实Windows系统设置关机很简单&#xff0c;主要有下面两个方法&#xff01; 演示机型&#xff1a;…
阅读更多...
【学习打卡 Free-Excel 】Task1～2 数据源何而来_数据格式

【学习打卡 Free-Excel 】Task1～2 数据源何而来_数据格式

free-excel 文章目录free-excel1 数据基本知识工作簿与工作表xls和xlsx单元格行列导入数据从文件导入数据从网页导入数据&#xff1a;中文编码&#xff1a;2 表格单元格数据类型excel错误提示数据统一添加符号数值转文本、文本转数值资源链接 Free excel_文字版Free excel&…
阅读更多...
系分 - 案例分析 - 数据库设计（基本）

系分 - 案例分析 - 数据库设计（基本）

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录系分 - 案例分析 - 数据库设计&#xff08;基本&#xff09;数据库基础数据库设计规范化&#xff08;范式&#xff09;数据库事务并发控制典型例题题目描述参考答案数据库安全性技术视图物化视图存储过程触…
阅读更多...
【练习】Day07

【练习】Day07

努力经营当下&#xff0c;直至未来明朗&#xff01; 文章目录一、选择二、编程1. 不同路径2. 三角形最小路径和 [重点理解&#xff01;&#xff01;]答案1. 选择2. 编程普通小孩也要热爱生活&#xff01; 一、选择 以下关于 Servlet 生命周期说法错误的是 ( ) A: Servlet 容器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023