CSS3---选择器分类，最全版
目录
标签选择器(元素选择器)
类选择器
id选择器
通配符选择器
伪类选择器
链接伪类选择器
结构伪类选择器
目标伪类选择器
标签选择器(元素选择器)
标签选择器，是指用HTML标签名称作为选择器，按照标签名称分类，为某一类标签指定统一的CSS样式。
代码实例演示，如下：
为p标签设置样式，则当前页面，所有的p标签的样式，都生效
<!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>CSS学习</title><style>p{color: pink;} </style>
</head><body><p>第一段</p><span>test</span><p>第二段</p><p>第三段</p>
</body></html>前台页面展示，如下
类选择器
类选择器使用 . 进行标识，后面紧跟类名
class="类名"
<!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>CSS学习</title><style>.red{color: red;}.pink{color: pink;} .yellow{color: yellow;} </style>
</head><body><div class="red">苹果</div><div class="pink">桃子</div><div class="yellow">香蕉</div>
</body></html>前台展示，如下
注意：
1.长名称或词组可以使用 - 中横线来为选择器命名
2.不建议使用 _ 下划线来命名CSS选择器
3.不要用纯数字、中文等命名，使用英文字母进行命名
多类名选择器
布局比较复杂的页面，需要多类名选择器
<!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>CSS学习</title><style>.font20{font-size: 20px;}.red{color: red;}.pink{color: pink;} </style>
</head><body><div class="red font20">苹果</div><div class="pink">桃子</div>
</body></html>前台页面展示，如下
注意：
1.样式显示效果与类名先后顺序无关，与CSS样式书写的上下顺序有关
2.各个类名中间用空格隔开
id选择器
id选择器使用 # 进行标识
元素的id值是唯一的，只能对应于文档中某一个具体的元素
<!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>CSS学习</title><style>#red{color: red;}.pink{color: pink;} </style>
</head><body><div id="red">苹果</div><div class="pink">桃子</div><div class="pink">葡萄</div>
</body></html>前台页面展示，如下
注意：
1.同一个页面内，id唯一，class可重复
2.类选择器，class好比人的名字，可重复
id选择器，好比人的身份证ID，唯一
通配符选择器
通配符选择器用 * 表示，作用范围很广，匹配页面中所有的元素
<!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>CSS学习</title><style>*{color: pink;} </style>
</head><body><div id="red">苹果</div><p class="pink">桃子</p><span class="pink">葡萄</span>
</body></html>前台页面展示，如下
伪类选择器
链接伪类选择器
:link，未访问的链接
:visited，已访问的链接
:hover，鼠标经过链接
: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>CSS学习</title><style>a:link{color: black; /*未访问的时候为黑色*/}a:visited{color: red; /*访问后为红色*/}a:hover{color: pink; /*鼠标经过为粉色*/}a:active{color: blue; /*鼠标选定为蓝色*/}</style>
</head><body><div> <a href="#"> 团购 </a> </div>
</body></html>最初的颜色为：黑色
鼠标经过为：粉色
鼠标选中为：蓝色
访问过后为：红色
结构伪类选择器
:fisrt-child。父元素的第一个子元素
:last-child。父元素的最后一个子元素的元素
:nth-child(n)。父元素的第 n 个子元素。其中 n 可以是整数（1，2，3）、关键字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值为 1，而不是 0。
:nth-last-child(n)：父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反，但使用方法都是一样的，其中 :nth-last-child(1) 始终匹配最后一个元素，与 last-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>CSS学习</title><style>li:first-child{color: bisque;}li:last-child{color: red;}li:nth-child(3){color: green;}li:nth-last-child(3){color: blue;}</style>
</head><body><ul><li>第1个，样式设置，li:first-child</li><li>第2个</li><li>第3个，样式设置，li:nth-child(3)</li><li>第4个</li><li>第5个，样式设置，li:nth-last-child(3)</li><li>第6个</li><li>第7个，样式设置，li:last-child</li></ul>
</body></html>前台页面展示，如下
目标伪类选择器
:target目标伪类选择器，可用于选取当前活动的目标元素
<!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>CSS学习</title><style>:target{color: pink;}</style>
</head><body><a href="#first">1 发展历程</a><br/><a href="#second">2 社会应用</a><br/><a href="#three">3 规范使用</a><h3 id="first">发展历程</h3><hr/>ChatGPT是美国人工智能研究实验室OpenAI新推出的一种人工智能技术驱动的自然语言处理工具，使用了Transformer神经网络架构，也是GPT-3.5架构，这是一种用于处理序列数据的模型，拥有语言理解和文本生成能力，尤其是它会通过连接大量的语料库来训练模型，这些语料库包含了真实世界中的对话，使得ChatGPT具备上知天文下知地理，还能根据聊天的上下文进行互动的能力，做到与真正人类几乎无异的聊天场景进行交流。ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。 [2]
在OpenAI的官网上，ChatGPT被描述为优化对话的语言模型，是GPT-3.5架构的主力模型。
ChatGPT具有同类产品具备的一些特性，例如对话能力，能够在同一个会话期间内回答上下文相关的后续问题。然而，其在短时间内引爆全球的原因在于，在网友们晒出的截图中，ChatGPT不仅能流畅地与用户对话，甚至能写诗、撰文、编码。
ChatGPT还采用了注重道德水平的训练方式，按照预先设计的道德准则，对不怀好意的提问和请求“说不”。一旦发现用户给出的文字提示里面含有恶意，包括但不限于暴力、歧视、犯罪等意图，都会拒绝提供有效答案。 [1]
2022年11月底，人工智能对话聊天机器人ChatGPT推出，迅速在社交媒体上走红，短短5天，注册用户数就超过100万。 [9]
2023年一月末，ChatGPT的月活用户已突破1亿，成为史上增长最快的消费者应用。 [14]
2023年2月2日，美国人工智能（AI）公司OpenAI发布ChatGPT试点订阅计划——ChatGPT Plus。ChatGPT Plus将以每月20美元的价格提供，订阅者可获得比免费版本更稳定、更快的服务，及尝试新功能和优化的优先权。 [7]
2023年2月2日，微软官方公告表示，旗下所有产品将全线整合ChatGPT，除此前宣布的搜索引擎必应、Office外，微软还将在云计算平台Azure中整合ChatGPT，Azure的OpenAI服务将允许开发者访问AI模型。 [9]
2023年2月3日消息，IT行业的领导者们担心，大名鼎鼎的人工智能聊天机器人ChatGPT，已经被黑客们用于策划网络攻击时使用。 [8]
黑莓（Black Berry）的一份报告调查了英国500名IT行业决策者对ChatGPT这项革命性技术的看法，发现超过四分之三（76%）的人认为，外国已经在针对其他国家的网络战争中使用ChatGPT。近一半（48%）的人认为，2023年，将会出现有人恶意使用ChatGPT而造成“成功”的网络攻击。 [8]
当地时间2023年2月2日，ChatGPT的开发公司——美国人工智能公司OpenAI顺势推出了这一应用程序的付费订阅版本。 [11]
2023年2月7日，微软宣布推出由ChatGPT支持的最新版本人工智能搜索引擎Bing（必应）和Edge浏览器。微软CEO表示，“搜索引擎迎来了新时代”。 [18] 8日凌晨，在华盛顿雷德蒙德举行的新闻发布会上，微软宣布将OpenAI传闻已久的GPT-4模型集成到Bing及Edge浏览器中。 [17]
2023年2月16日消息，微软在旗下必应搜索引擎和Edge浏览器中整合人工智能聊天机器人功能的举措成效初显，71%的测试者认可人工智能优化后的必应搜索结果。 [23]
2023年2月16日，百炼智能潜客宝团队在进行了市场调研之后，决定集成以“内容生成和智能互动”见长的ChatGPT，正式上线智能营销助理。 [26]
2023年2月27日消息，Snapchat 正在推出一个基于 OpenAI 的 ChatGPT 最新版本的聊天机器人。 [24] 这款名为“My AI”的机器人将被固定在应用界面的聊天选项卡上，虽然最初仅适用于每月3.99美元的SnapchatPlus付费订阅用户，但最终目标是让Snapchat的7.5亿月活跃用户都可以使用该机器人 [25]
2023年3月15日，OpenAI正式推出GPT-4。GPT-4是多模态大模型，即支持图像和文本输入以及文本输出，拥有强大的识图能力，文字输入限制提升到了2.5万字。GPT-4的特点在于，第一，它的训练数量更大；第二，支持多元的输出输入形式；第三，在专业领域的学习能力更强。 [28]
2023年3月，谷歌宣布，ChatGPT——Bard正式开启测试。 [30]
2023年3月24日，OpenAI宣布ChatGPT支持第三方插件，解除了其无法联网的限制。 [31] <h3 id="second">社会应用</h3><hr/>一项调查显示，截止2023年1月，美国89%的大学生都是用ChatGPT做作业。 [4]
2023年1月，巴黎政治大学（Sciences Po）宣布，该校已向所有学生和教师发送电子邮件，要求禁止使用ChatGPT等一切基于AI的工具，旨在防止学术欺诈和剽窃。 [3]
ChatGPT的应用场景还包括：用来开发聊天机器人，也可以编写和调试计算机程序，还可以进行文学、媒体相关领域的创作，包括创作音乐、电视剧、童话故事、诗歌和歌词等。在某些测试情境下，ChatGPT在教育、考试、回答测试问题方面的表现甚至优于普通人类测试者。 [6]
2023年2月4日消息，以色列总统艾萨克·赫尔佐格(Isaac Herzog)周三发表了部分由人工智能(AI)撰写的演讲，成为首位公开使用ChatGPT的世界领导人。 [10]
2023年2月7日消息，Take-Two Interactive的首席执行官斯特劳斯·泽尔尼克（Strauss Zelnick）表示：ChatGPT是“一个非常激动人心的新工具时代”的一部分，可以“让团队和竞争对手的团队更有效地做真正有趣的事情”，但这项技术不会彻底改变电子游戏行业。 [13]
2023年2月8日，微软宣布推出由ChatGPT支持的最新版本搜索引擎必应。 [15] <h3 id="three">规范使用</h3>
2023年2月，媒体报道，欧盟负责内部市场的委员蒂埃里·布雷东日前就“聊天生成预训练转换器”发表评论说，这类人工智能技术可能为商业和民生带来巨大的机遇，但同时也伴随着风险，因此欧盟正在考虑设立规章制度，以规范其使用，确保向用户提供高质量、有价值的信息和数据。 [12]
2023年3月，全国人大代表、科大讯飞董事长刘庆峰提出：类ChatGPT可能是人工智能最大技术跃迁，应当加快推进中国认知智能大模型建设，在自主可控平台上让行业尽快享受AI红利，让每个人都有AI助手。 [27]
</body></html>访问 “社会应用” 模块，页面展示，如下
CSS3---选择器分类，最全版相关推荐
- CSS3 选择器总结（表格版）
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) 选择器 例子 例子 ...
- CSS3选择器（选择符）
CSS3选择器分类 本文列举常用的几种选择器 一.层级选择器 E>F 子选择器 选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素 div>em{ color: red; } HTML ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- CSS选择器分类大全
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用. 简单来说,就是选择标签用的. 分类:基础选择器.复合选择器 目录 一.基础选择器 二.复合选择器 三.CSS3选择器补充: (一 ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS基本知识之常用的选择器分类
一.CSS基本知识: 1.CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表. 2.CSS 是也是一种标记语言 3.CS ...
- 总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- css3自学教学,css3精通学习教程(全).pdf
css3精通学习教程(全) CSS3精通教程 (详细) 说明:本教程由个人通过网络资料整理,如存在侵权内容,请读者立 即删除. 本教程实例资料请联系QQ:2237993760下载,谢谢! 第 章 初始 ...
- 肖博老师高中数学必备知识点总结最全版
从今天开始老师逐步给大家总结现阶段高中数学的知识点,如在学习中遇到问题或咨询解题技巧,查看视频教程等相关问题,欢迎同学们给肖老师留言! 目录结构如下: 引言 1.课程内容: 必修课程由5个模块组成: ...
- CSS和CSS3选择器
这一篇是对精通CSS:高级Web标准解决方案第二章的学习总结. 将会有以下内容: (1).常用的选择器. (2).高级选择器 (3).新的CSS3选择器 最常用的选择器类型是类型选择器和后代选择器.类 ...
最新文章
- 并发基础篇（一） 线程介绍
- [No0000142]Outlook通过添加签名 自动添加邮件模板
- 互联网晚报 | 9月20日 星期一 | 阿里淘菜菜新增“找好友微信代付”入口；百度进军货运赛道；北京环球度假区今起正式开放...
- 计算机术语解ssh,将Bash脚本SSH到计算机中而不提示密码和不使用密钥
- springMVC的各种路径含义及其作用
- 基于Matlab的自适应低通滤波器设计,课程设计-低通滤波器设计(含matlab程序)
- X265代码学习1-X265源码下载编译及VS调试配置
- 启动 COMSOL 时发生意外错误：无法加载文件或程序集 ‘cstextrenderer_wpf‘
- python周环比增长率_Python如何计算环比增长率
- C++学习（11）（综合题）
- Appium+python自动化（七）- 初识琵琶女Appium（千呼万唤始出来，犹抱琵琶半遮面）- 上（超详解）...
- 网站主题实现技术-jsp include
- 《王者荣耀》突然停运？看到官方公告直接傻眼……
- ESP8266 + MAX7219 做一个简易的自动同步的倒计时时钟
- mstsc 后 不锁屏
- 盛世昊通：面向“双碳”目标，开拓汽车产业价值蓝海
- RT-Thread stm32 spi 使用笔记
- 谁说 14 英寸没有好屏幕 — MateBook 14 评测
- 攻击方法与工业控制系统安全
- 字符设备、块设备与网络设备