HTML——选择器总结（直观 一目了然）
1、选择器是什么？
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。
2、选择器的分类
css选择器可以分为基本选择器、包含选择器、属性选择器、伪类选择器和伪元素选择器几类。
其中基本选择器又可以细分为：标签选择器、ID选择器、类选择器和通用选择器。
包含选择器可以分为：子代选择器、后代选择器和分组选择器。
2.1基本选择器
2.1.1 标签选择器
标签选择器是通过获取标签的名称来进行设置。
<!DOCTYPE html>
<html lang="en">
<head><title>选择器</title>
</head><style type="text/css">div{color: red;}</style>
<body><div id="wang" class="bao">yes yes yes </div>
</body>
</html>2.1.2 ID选择器
ID选择器是通过获取ID的属性来进行设置，使用 #+ID属性值来选中。
<!DOCTYPE html>
<html lang="en">
<head><title>选择器</title>
</head><style type="text/css">#wang{color: black;}</style>
<body><div id="wang" class="bao">yes yes yes </div>
</body>
</html>2.1.3 类选择器
类选择器是通过获取class属性来进行设置，使用 .+class属性值来选中。
<!DOCTYPE html>
<html lang="en">
<head><title>选择器</title>
</head><style type="text/css">.bao{color:green;}</style>
<body><div id="wang" class="bao">yes yes yes </div>
</body>
</html>2.1.4 通用选择器
通用选择器使用 * 来代指，它代表的是选中了父元素中的所有内容。
<!DOCTYPE html>
<html lang="en">
<head><title>选择器</title>
</head><style type="text/css">*{color: blue;}</style>
<body><div id="wang" class="bao">yes yes yes </div><div>no no no</div>
</body>
</html>ps:优先级为：ID > class > 标签 > 通配符
2.2 包含选择器
2.2.1 子代选择器
子代选择器是通过获取某个标签的第一级子标签来设置。格式为：标签.属性值>子标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">/*子代*/div.wang>ul{border: 1px solid red;}</style>
</head>
<body><div class="bao">有何不可</div><div title="jiang">最佳歌手</div><div class="wang"><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul></div>
</body>
</html>2.2.2 后代选择器
后代选择器是通过获取的某个标签里面所有的子标签来设置。格式为：.属性名 二级子标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">/*后代*/.wang li{border: 1px solid yellow;}
</style>
</head>
<body><div class="bao">有何不可</div><div title="jiang">最佳歌手</div><div class="wang"><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul></div>
</body>
</html>2.2.3 分组选择器
也叫做逗号选择器，可以同时设置多个标签，使用逗号进行分割。
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">.bao,.jiang,#xu{color: aqua;width: 50;height: 50;background:pink;border: 5px solid rgb(132, 0, 255);}
</style>
</head>
<body><div class="bao">有何不可</div><div title="jiang">最佳歌手</div><p id="xu">许嵩</p><div class="wang"><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul></div>
</body>
</html>2.3 属性选择器
元素带有属性，属性选择器就是通过选中带有特定属性的元素进行设置。
<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">/*选中含有title属性的div标签*/div[title]{border: 1px solid black;} /*选中type属性的值为text的input标签*/input[type="text"]{background: 1px solid red;}/*选中type属性的值中含有'e'的input标签*/input[type *="e"]{background: blue;}/*选中type属性的值以'e'开头的input标签*/input[type ^="e"]{background: green;}/*选中type属性的值以'rl'结尾的input标签*/input[type $="rl"]{background: red;}/*+表示选中下一个标签*/.msg +p{border: 1px solid green;}/*选中title属性值为'jiang'的标签*/[title="jiang"]{color: red;}
</style>
</head>
<body><div class="bao">有何不可</div><div title="jiang">最佳歌手</div><input type="text" name="" value="wang"><input type="email" name="" value="bao"><input type="url" name="" value="jiang"><p class="hao">hello!</p>
</body>
</html>2.4 伪类选择器
即同一个标签，在不同的状态下显示出来的效果不同，通过设置不同的样式来实现.
状态： :link 点击之前
:visited 点击之后
:hover 悬浮时
:active 长按不松手时
<!DOCTYPE html>
<html lang="en">
<head><title></title><style type="text/css">/*点击之前的状态*/a:link{color: red;}/*点击之后的状态*/a:visited{color:chartreuse;}/*指针悬浮时的状态*/a:hover{color: darkmagenta;}/*长按不松手时的状态*/a:active{color: pink;}</style>
</head>
<body><a href="http://www.baidu.com">点这里</a>
</body>
</html>2.5 伪元素选择器
状态： ::before
::after
::before
<!DOCTYPE html>
<html lang="en">
<head>
<title></title><style type="text/css">p::before{content:"阿珍";color: red;}p::after{content:"阿强";color: aqua;}</style>
</head>
<body><p>爱上了</p>
</body>
</html>HTML——选择器总结（直观 一目了然）相关推荐
- ios自定义日期、时间、城市选择器
选择器,我想大家都不陌生,当需要用户去选择某些范围值内的一个固定值时,我们会采用选择器的方式.选择器可以直观的提示用户选择的值范围.统一信息的填写格式,同时也方便用户快速的进行选择,比如对于性别,正常 ...
- 智能算法！数据平台自动生成报表，智慧景区的可视化有什么不同
十一各位都出去玩吗?有没有想过用大数据和数据可视化和景区也能联系起来呢? 项目背景 1.信息化发展历程 2015年以前,景区基本没有信息化概念,比如门票是印刷版,检票人工打孔,手工数据报表等,随着信息 ...
- excel操作练习_你见过最好的Excel教程有哪些？
教程领到手,学习不用愁!领 答案找一套知识兔Excel教程,学习Excel基本功能,学习Excel高频应用技能--之后很简单,就是反复的练,刻意的练习,不然就多应用.兴趣使然,以应用为导向,学以致用, ...
- python接口自动化（二十七）--html 测试报告——上（详解）
简介 上一篇我们批量执行完用例后,生成的测试报告是文本形式的,不够直观,而且报告一般都是发给leader的,所以最好是直观一目了然,为了更好的展示测试报告,最好是生成 HTML 格式的.unittes ...
- AI绘画能力的起源：通俗理解VAE、扩散模型DDPM、DETR、ViT/Swin transformer
前言 2018年我写过一篇博客,叫:<一文读懂目标检测:R-CNN.Fast R-CNN.Faster R-CNN.YOLO.SSD>,该文相当于梳理了2019年之前CV领域的典型视觉模型 ...
- 应用在汽车倒车影像中的环境光传感芯片
倒车影像又称泊车辅助系统,或称倒车可视系统.车载监控系统等.该系统广泛应用于各类大.中.小车辆倒车或行车安全铺助领域.不管从结构和外观上,还是从性能价格上,如今的产品都各有特点,使用较多的是数码显示. ...
- linux 查看cacti 信息,Linux 之cacti 监控介绍
cacti (rrdtool是画图工具,)监控网设备占优势. nagios 直观一目了然,可以自已写脚本,但是不支持历史数据的查看. zabbix,功能丰富. 安装 cacti服务端 #楼主的系统是 ...
- 浅谈try-catch——为什么要用try-catch什么时候用try-catch？
本文主要内容如题所述,下面给出解答: 首先第一个问题,我们为什么要使用try-catch捕获异常? 我们都知道当程序中出现诸如数值越界之类的异常是,系统会自动抛出特定异常,不加处理的话此时的异常是一堆 ...
- 中国兽药企业寻找整合营销的新契机
历史上每一次的媒体形态更替,我们看到的几乎都是新产生媒体与已存在媒体之间颇长的一段对立,舆论界的倾向评论往往是新生的模式必将取代既有模式,创造新天地.然而,历史呈现的往往是一个兼存并包.一加一大于二的 ...
最新文章
- opencv基础小程序大集合
- wordpress PHP合并js,如何在WordPress中添加外部JavaScript
- 7-10 石子合并 (10 分)
- linux下载命令 scp,linux命令详解之scp命令
- redis 配置文件参数详解
- 苹果发生大规模宕机，网友调侃“突然白苹果了一会。”
- 谷歌大脑QT-Opt算法，机器人探囊取物成功率96%，Jeff Dean大赞
- opencv之绘制多边形----cv2.polylines, cv2.fillPoly
- nginx trac mysql svn_linux下nginx+svn
- opencv摄像头捕获视频
- 中图分类号计算机 tp,中图分类号(TP)
- 品牌鞋的运作，如何判别鞋的品牌真伪
- 修真院七种教学工具之学习日报
- 如何理解国产操作系统，现状又是如何？
- 计算机如何连接发票打印机,惠普打印机怎么连接电脑详细步骤,发票打印机怎么添加-...
- 导入sql报错：1273 - Unknown collation: ‘utf8mb4_0900_ai_ci‘
- CodeForces - 1646C Factorials and Powers of Two
- PS改变图片像素大小（一寸照片变二寸）
- XSS漏洞的原理与测试解决方案笔记
- 走向5G：面对困难，展望未来