Web前端-Web开发CSS基础2-选择器

news/2024/9/15 4:52:50/ 标签: 前端, css

一. 基础
1. 选中所有的<p>标签;
2. 选中所有的<ol>标签;
3. 选中所有的<ul>标签;
4. 选中所有id为happy的标签;
5. 选中所有id为sad的标签;
6. 选中所有id为angry的标签;
7. 选中所有类名为class1的标签;
8. 选中所有类名为class2的标签;
9. 选中所有类名为class3的标签;
10. 选中所有类名为class4的标签;
11. 选中所有类名为class5的标签;
12. 选中所有类名为class6的标签;
13. 选中所有的html元素;
14. 选中所有的html元素;
15. 选中所有的html元素;
16. 选中所有的class1类、class2类和class3类;
17. 选中所有的id为happy、id为sad和id为angry的类;
18. 选中所有的<p>标签、<h1>标签和<h2>标签;
19. 选中所有<article>标签下的所有<p>标签;
20. 选中所有<header>标签下的所有<p>标签;
21. 选中所有<footer>标签下的所有<p>标签;
22. 选中所有class1类下的所有p标签;
23. 选中所有class2类下的所有p标签;
24. 选中所有class3类下的所有p标签;
25. 选中所有id为happy下的所有p标签;
26. 选中所有id为sad下的所有p标签;
27. 选中所有id为angry下的所有p标签;
28. 选中所有<article>标签下的所有子级<p>标签;
29. 选中所有<header>标签下的所有子级<p>标签;
30. 选中所有<footer>标签下的所有子级<p>标签;
31. 选中所有class1类下的所有子级p标签;
32. 选中所有class2类下的所有子级p标签;
33. 选中所有class3类下的所有子级p标签;
34. 选中所有id为happy的标签下的所有子级p标签;
35. 选中所有id为sad的标签下的所有子级p标签;
36. 选中所有id为angry的标签下的所有子级p标签;
37. 选中所有紧跟在<article>标签后的一个<p>标签;
38. 选中所有紧跟在<header>标签后的一个<p>标签;
39. 选中所有紧跟在<footer>标签后的一个<p>标签;
40. 选中所有紧跟在class1类后的一个<p>标签;
41. 选中所有紧跟在class2类后的一个<p>标签;
42. 选中所有紧跟在class3类后的一个<p>标签;
43. 选中所有紧跟在id为happy的标签后的一个<p>标签;
44. 选中所有紧跟在id为sad的标签后的一个<p>标签;
45. 选中所有紧跟在id为angry的标签后的一个<p>标签;
46. 选中所有与<article>标签同级的<p>标签;
47. 选中所有与<header>标签同级的<p>标签;
48. 选中所有与<footer>标签同级的<p>标签;
49. 选中所有与class1类同级的p标签;
50. 选中所有与class2类同级的p标签;
51. 选中所有与class3类同级的p标签;
52. 选中所有与id为happy的标签同级的p标签;
53. 选中所有与id为sad的标签同级的p标签;
54. 选中所有与id为angry的标签同级的p标签;
55. 按顺序,选中所有未访问过的<a>标签、访问过的<a>标签、鼠标悬停时的<a>标签、按下不放时的<a>标签;
56. 按顺序,选中所有未访问过的<input>标签、访问过的<input>标签、鼠标悬停时的<input>标签、按下不放时的<input>标签;
57. 按顺序,选中所有未访问过的<button>标签、访问过的<button>标签、鼠标悬停时的<button>标签、按下不放时的<button>标签;
58. 按顺序,选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签;
59. 按顺序,选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签;
60. 按顺序,选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签;
61. 选中所有<p>标签,并且这个<p>标签是其父标签中的第一个标签;
62. 选中所有<button>标签,并且这个<button>标签是其父标签中的第一个标签;
63. 选中所有<input>标签,并且这个<input>标签是其父标签中的第一个标签;
64. 选中所有类名为class1的标签,并且这个类名为class1的标签是其父标签中的第一个标签;
65. 选中所有id为angry的标签,并且这个id为angry的标签是其父标签中的第一个标签;
66. 选中所有id为happy的标签,并且这个id为happy的标签是其父标签中的第一个标签;
67. 选中所有<p>标签,并且这个<p>标签是其父标签<div>中的第一个标签;
68. 选中所有<button>标签,并且这个<button>标签是其父标签<div>中的第一个标签;
69. 选中所有<input>标签,并且这个<input>标签是其父标签<div>中的第一个标签;
70. 选中所有类名为class1的标签,并且这个类名为class1的标签是其父标签<div>中的第一个标签;
71. 选中所有id为angry的标签,并且这个id为angry的标签是其父标签<div>中的第一个标签;
72. 选中所有id为happy的标签,并且这个id为happy的标签是其父标签<div>中的第一个标签;
73. 选中所有<p>标签,并且这个<p>标签是其类名为class1的父标签中的第一个标签;
74. 选中所有<button>标签,并且这个<button>标签是其类名为class2的父标签中的第一个标签;
75. 选中所有<input>标签,并且这个<input>标签是其类名为class3的父标签中的第一个标签;
76. 选中所有类名为class1的标签,并且这个类名为class1的标签是其类名为class4的父标签中的第一个标签;
77. 选中所有id为angry的标签,并且这个id为angry的标签是其类名为class5的父标签中的第一个标签;
78. 选中所有id为happy的标签,并且这个id为happy的标签是其类名为class6的父标签中的第一个标签;
79. 选中所有<p>标签,并且这个<p>标签是其id为fff的父标签中的第一个标签;
80. 选中所有<button>标签,并且这个<button>标签是其id为fff的父标签中的第一个标签;
81. 选中所有<input>标签,并且这个<input>标签是其id为fff的父标签中的第一个标签;
82. 选中所有类名为class1的标签,并且这个类名为class1的标签是其id为fff的父标签中的第一个标签;
83. 选中所有id为angry的标签,并且这个id为angry的标签是其id为fff的父标签中的第一个标签;
84. 选中所有id为happy的标签,并且这个id为happy的标签是其id为fff的父标签中的第一个标签;
85. 选中<ul>标签下的第1个子标签;
86. 选中<ul>标签下的第2个子标签;
87. 选中<ul>标签下的第3个子标签;
88. 选中<ul>标签下的第1个子标签和第2个子标签;
89. 选中<ul>标签下的第1个子标签和第4个子标签;
90. 选中<ul>标签下的第3个子标签和第6个子标签;
91. 选中所有标签下,使用者选中的部分;
92. 选中所有标签下,使用者选中的部分;
93. 选中所有标签下,使用者选中的部分;
94. 在每个<p>标签之后,都插入图片../img/img1.png;
95. 在每个<p>标签之后,都插入图片../img/img2.png;
96. 在每个<p>标签之后,都插入图片../img/img3.png;
97. 在每个<p>标签之前,都插入图片../img/img1.png;
98. 在每个<p>标签之前,都插入图片../img/img2.png;
99. 在每个<p>标签之前,都插入图片../img/img3.png;


一. 基础
1. p{ ... }
2. ol{ ... }
3. ul{ ... }
4. #happy{ ... }
5. #sad{ ... }
6. #angry{ ... }
7. .class1{ ... }
8. .class2{ ... }
9. .class3{ ... }
10. .class4{ ... }
11. .class5{ ... }
12. .class6{ ... }
13. *{ ... }
14. *{ ... }
15. *{ ... }
16. .class1, .class2, .class3{ ... }
17. #happy, #sad, #angry{ ... }
18. p, h1, h2{ ... }
19. article p{ ... }
20. header p{ ... }
21. footer p{ ... }
22. .class1 p{ ... }
23. .class2 p{ ... }
24. .class3 p{ ... }
25. #happy p{ ... }
26. #sad p{ ... }
27. #angry p{ ... }
28. article > p{ ... }
29. header > p{ ... }
30. footer > p{ ... }
31. .class1 > p{ ... }
32. .class2 > p{ ... }
33. .class3 > p{ ... }
34. #happy > p{ ... }
35. #sad > p{ ... }
36. #angry > p{ ... }
37. article + p{ ... }
38. header + p{ ... }
39. footer + p{ ... }
40. .class1 + p{ ... }
41. .class2 + p{ ... }
42. .class3 + p{ ... }
43. #happy + p{ ... }
44. #sad + p{ ... }
45. #angry + p{ ... }
46. article ~ p{ ... }
47. header ~ p{ ... }
48. footer ~ p{ ... }
49. .class1 ~ p{ ... }
50. .class2 ~ p{ ... }
51. .class3 ~ p{ ... }
52. #happy ~ p{ ... }
53. #sad ~ p{ ... }
54. #angry ~ p{ ... }
55. a:link{ ... }    a:visited{ ... }    a:hover{ ... }    a:active{ ... }
56. input:link{ ... }    input:visited{ ... }    input:hover{ ... }    input:active{ ... }
57. button:link{ ... }    button:visited{ ... }    button:hover{ ... }    button:active{ ... }
58. .class1:link{ ... }    .class1:visited{ ... }    .class1:hover{ ... }    .class1:active{ ... }
59. #happy:link{ ... }    #happy:visited{ ... }    #happy:hover{ ... }    #happy:active{ ... }
60. #sad:link{ ... }    #sad:visited{ ... }    #sad:hover{ ... }    #sad:active{ ... }
61. p:first-child{ ... }
62. button:first-child{ ... }
63. input:first-child{ ... }
64. .class1:first-child{ ... }
65. #angry:first-child{ ... }
66. #happy:first-child{ ... }
67. div p:first-child{ ... }
68. div button:first-child{ ... }
69. div input:first-child{ ... }
70. div .class1:first-child{ ... }
71. div #angry:first-child{ ... }
72. div #happy:first-child{ ... }
73. .class1 p:first-child{ ... }
74. .class2 button:first-child{ ... }
75. .class3 input:first-child{ ... }
76. .class4 .class1:first-child{ ... }
77. .class5 #angry:first-child{ ... }
78. .class6 #happy:first-child{ ... }
79. #fff p:first-child{ ... }
80. #fff button:first-child{ ... }
81. #fff input:first-child{ ... }
82. #fff .class1:first-child{ ... }
83. #fff #angry:first-child{ ... }
84. #fff #happy:first-child{ ... }
85. ul > li:nth-child(1){ ... }
86. ul > li:nth-child(2){ ... }
87. ul > li:nth-child(3){ ... }
88. ul > li:nth-child(1), ul > li:nth-child(2){ ... }
89. ul > li:nth-child(1), ul > li:nth-child(4){ ... }
90. ul > li:nth-child(3), ul > li:nth-child(6){ ... }
91. ::selection{ ... }
92. ::selection{ ... }
93. ::selection{ ... }
94. p::after{ content: url(../img/img1.png); }
95. p::after{ content: url(../img/img2.png); }
96. p::after{ content: url(../img/img3.png); }
97. p::before{ content: url(../img/img1.png); }
98. p::before{ content: url(../img/img2.png); }
99. p::before{ content: url(../img/img3.png); }


http://www.ppmy.cn/news/1475989.html

相关文章

n3.平滑升级和回滚

平滑升级和回滚 1. 平滑升级流程2. 平滑升级和回滚案例 有时候我们需要对Nginx版本进行升级以满足对其功能的需求&#xff0c;例如添加新模块&#xff0c;需要新功能&#xff0c;而此时 Nginx又在跑着业务无法停掉&#xff0c;这时我们就可能选择平滑升级 1. 平滑升级流程 平…

《斯科特·凯尔比的风光摄影手册》读书笔记

写在前面 《斯科特凯尔比的风光摄影手册》读书笔记整理没有全部读完&#xff0c;选择了感兴趣的章节理解不足小伙伴帮忙指正 &#x1f603;,生活加油 99%的焦虑都来自于虚度时间和没有好好做事&#xff0c;所以唯一的解决办法就是行动起来&#xff0c;认真做完事情&#xff0c;…

25届平安产险校招测评IQ新16PF攻略:全面解析与应试策略

尊敬的读者&#xff0c;您好。随着平安产险校招季的到来&#xff0c;许多应届毕业生正积极准备着各项测评。本文旨在提供一份详尽的测评攻略&#xff0c;帮助您更好地理解平安产险的校招测评流程&#xff0c;以及如何有效应对。 25届平安产险平安IQ&#xff08;新&#xff09;测…

入门小结:JavaScript小白语法

一、变量 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> &…

Linux环境下配置redis

修改当前redis目录下的redis.conf文件 vim redis.conf redis-server redis.conf开启redis redis-cli连接 redis-cli shutdown关闭redis

【漏洞复现】Rejetto HTTP文件服务器——远程命令执行(CVE-2024-23692)

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 Rejetto HTTP文件服务器是一个轻量级的HTTP服务器软件&#xff…

【图解大数据技术】流式计算:Spark Streaming、Flink

【图解大数据技术】流式计算&#xff1a;Spark Streaming、Flink 批处理 VS 流式计算Spark StreamingFlinkFlink简介Flink入门案例Streaming Dataflow Flink架构Flink任务调度与执行task slot 和 task EventTime、Windows、WatermarksEventTimeWindowsWatermarks 批处理 VS 流式…

UnityECS学习中问题及总结entityQuery.ToComponentDataArray和entityQuery.ToEntityArray区别

在Unity的ECS&#xff08;Entity Component System&#xff09;开发中&#xff0c;entityQuery.ToComponentDataArray<T>(Allocator.Temp) 和 entityQuery.ToEntityArray(Allocator.Temp) 是两种不同的方法&#xff0c;用于从实体查询中获取数据。除了泛型参数之外&#…

AI人工智能开源大模型生态体系分析

人工智能开源大模型生态体系研究 "人工智能开源大模型生态体系研究报告v1.0"揭示&#xff0c;AI(A)的飞速发展依赖于三大核心&#xff1a;数据、算法和算力。这一理念已得到业界广泛认同&#xff0c;三者兼备才能推动AI的壮大发展。随着AI大模型的扩大与普及&#xf…

iPhone恢复篇:如何从iPhone恢复误删除的照片

iPhone用户喜欢它的相机。使用其引人注目的功能捕捉昂贵的记忆是 iOS 设备的最大吸引力之一。但是&#xff0c;与任何其他手机一样&#xff0c;数码照片也可能会从iPhone中丢失。 如果丢失的照片包括您珍贵的回忆——假期、婚礼、您孩子的一岁生日或朋友的聚会&#xff0c;那么…

python-Web

FLASK整体框架: from flask import Flask,render_templateapp Flask(__name__)app.route("/show/info")#网址 def index():#网址对应的函数return render_template("index.html")#falsk 支持将字符串写入文件if __name____main__:app.run()#访问网站的时…

springboot1——快速构建项目

需求 第一步&#xff1a;创建maven工程(非web项目) 第二步&#xff1a;导入起步依赖 点击&#xff1a; 下拉复制&#xff1a; 粘贴&#xff1a;&#xff01;&#xff01;这是springboot工程需要继承的父工程 下拉复制&#xff1a; 粘贴&#xff1a;&#xff01;&#xf…

大白话之SpringMVC中的ModelAndView

在Spring MVC框架中&#xff0c;ModelAndView是一个非常关键的类&#xff0c;它用于封装控制器(Controller)方法执行后的两个重要输出&#xff1a;模型数据(Model)和视图(View)。 让我们用大白话来解释一下&#xff1a; 想象一下&#xff0c;你去一家餐厅点餐。服务员&#x…

Qt 多语言

记录Qt多语言的实现过程 目录 1.项目配置文件.pro配置 2.程序中的字符串用tr()封装 3.生成翻译文件 4.使用Qt语言家修改翻译文件 4.1使用Qt语言家打开 4.2 .更改文件配置 5. 生成qm文件 6.代码执行切换语言 6.1入口处 6.2 事件执行 0.效果 1.项目配置文件.pro配置 T…

电脑只有一个C盘怎么办?

在日常使用电脑的过程中&#xff0c;不少用户会遇到电脑只有一个C盘的情况。C盘作为系统盘&#xff0c;既要运行操作系统&#xff0c;又要安装各种软件和存放用户文件&#xff0c;时间一长&#xff0c;C盘就容易爆满&#xff0c;导致系统运行缓慢&#xff0c;甚至出现崩溃。那么…

Calibration相机内参数标定

1.环境依赖 本算法采用张正友相机标定法进行实现&#xff0c;内部对其进行了封装。 环境依赖为 ubuntu20.04 opencv4.2.0 yaml-cpp yaml-cpp安装方式&#xff1a; &#xff08;1&#xff09;git clone https://github.com/jbeder/yaml-cpp.git #将yaml-cpp下载至本地 &a…

开源科学工程技术软件

目录 0 参考链接 1 Silx 2 Klampt 3 参数化三维3D软件Dune 3D 4 GPS日志文件查看器GPXSee 5 三维3D软件Chili3D 6 集成电路设计软件XicTools 7 天文学软件Cosmonium 8 计算流体力学软件FluidX3D 9 点云处理软件CloudCompare 10 野外火灾建模软件WindNinja 11 电子设…

DVC+Minio

由于参数文件比较大&#xff0c;因此onnx、engine等大文件弃用LFS管理&#xff0c;改用dvc管理&#xff1a; minio就是存储用的 启动miniosudo netstat -ntpl#查看端口号 sudo kill -9 $(sudo lsof -i:5061 -t) 关闭端口对应进程 ./minio server --console-address ":6570…

昇思25天学习打卡营第二十四天|基于MindSpore通过GPT实现情感分类

基于MindSpore通过GPT实现情感分类 导入数据集 import osimport mindspore from mindnlp._legacy.engine import Evaluator, Trainer from mindnlp._legacy.engine.callbacks import BestModelCallback, CheckpointCallback from mindnlp._legacy.metrics import Accuracy fr…

【Vue3】4个比较重要的设计模式!!

大家好,我是CodeQi! 一位热衷于技术分享的码仔。 在我投身于前端开发的职业生涯期间,曾有一次承接了一个大型项目的维护工作。此项目运用的是 Vue 框架,然而其代码结构紊乱不堪,可维护性极度糟糕😫。 这使我深刻领会到,理解并运用 Vue 中的重要设计模式是何等关键! …