选择符/选择器 深入了解 全面的选择器学习
选择符/选择器 深入了解 全面的选择器学习:
一、什么是选择器/选择符?
在 CSS 中,选择器是一种模式,通过选择器 ,我们可以选择到相应的元素。对齐添加样式。
二、选择器/选择符 分类
序号 | 大类 | 示例 | 说明 |
---|---|---|---|
① | 通配选择器(全局选择器) | * |
指的是所有标签元素 不要轻易使用这个选择器,比较消耗性能,那我们是怎么初始化边距的??? |
② | 元素选择器 | p | 指的是某个标签元素 |
③ | class类型选择器 | .classname | 指的是class名为classname的元素,可以是多个 |
④ | id选择器 | #idname | 指的是class名为idsname的元素,只可以是一个,因为id是唯一的,即使误操作也只能选择到第一个元素 |
⑤ | 属性选择器 | 略 |
简单属性选择器,具体属性值选择器,部分属性选择器,开始子串属性值选择器,结束子串属性值选择器,任意子串属性值选择器,语言属性选择器 |
⑥ | 伪类与为元素选择略 |
伪类:通过选择器可以选择到一类元素,可能是0个,1个,多个, 伪元素:通过选择器可以选择到一个元素,例如:after :before :first-letter :first-line |
⑦ | 组合选择器 | 略 |
组合选择器就是多个选择器组合使用,是前面 几种 选择器的联合使用 简单组合选择器:后代选择器,子选择器,相邻兄弟选择器,后续选择器 复杂组合选择器:这个很多,具体学习 |
2.1 通配符选择器/全局选择器
符号: * 就是一个星号,代表的是所有的标签,通常用来初始化,但是耗能比较大,不推荐使用
代码:
*{margin: 0;padding: 0;}
通配符使用在组合选择器,
代码:
div * p {color: red;/* 组合选择器(后代选择器) div * p 指的是div标签下的 所有标签 下的p标签 的文本都设置为红色*/}
2.2 元素 选择器
符号: tagname 就是标签的名称
代码:
p {color: red;/* 指的是所有p元素 的文本都设置为红色*/}
2.3 class类名 选择器
符号: .classname 就是 圆点 与类名
代码:
<style>.red {color: red;/* 指的是所有class名为red的元素 的文本都设置为红色*/}</style>
</head><body><div style="border: 1px solid black; width: 200px;"><p>pppp,不变色</p><p class="red">pppp红色</p><p>pppp</p><div class="red">aaaaa红色</div></div>
</body>
结果:
2.4 id名 选择器
符号: #idname 就是 #号 与id名
代码:
<style>#red {color: red;/* 指的是id名为red的元素 的文本都设置为红色*/}</style>
</head><body><div style="border: 1px solid black; width: 200px;"><p>pppp,不变色</p><p id="red">pppp红色</p><p>pppp</p></div>
</body>
结果:
2.5 属性 选择器
① 简单属性选择器: 元素名[属性名]
例如: a[rel]{color:red;} 说明:存在rel属性的a元素
例如: p[class]{color:red;} 说明:存在属性class的p元素
②具体属性选择器: 元素名[属性名="属性值"]
例如: a[rel="home"]{color:red;} 说明:存在rel属性,且属性值为home的a元素
例如: input[type="text"]{}
例如:input[type="button"]{}
③部分属性值 选择器: 元素名[属性名~="属性值(的部分内容)"] 一个属性的值可能存在以空格分开的多个值
例如: p[class~="red"] 说明:class属性的值里面,包含有red p元素就会被选上 ,这里等价于 .red 类型选择器
例如:a[rel~="home"] 说明:rel属性的值里面,包含有home ,那么这个a元素就会被选上
代码:
<style>p[class~="red"] {color: red;/* 指的是class属性中属性值包含red的元素 的文本都设置为红色*/}</style>
</head><body><div style="border: 1px solid black; width: 200px;"><p>pppp</p><p id="red">pppp</p><p class="red">pppp变色</p><p class="red1 red2">pppp,不包含red,不变色</p><p class="red2 red">pppp,包含red变色</p><p class="red2">pppp不变</p></div>
</body>
结果:
④开始子串属性值 选择器: 元素名[属性名~="属性值的开头部分字符串)"]
例如: a[href^="/blog"] 说明:属性href的属性值的开头的字符串为/blog 的a元素
例如:img[title^="figure"] 说明:title属性的属性值的开头的字符串为/figure 的img元素
⑤结束子串属性值 选择器: 元素名[属性名~="属性值的 结尾部分字符串)"]
例如: a[href$=".pdf"] 说明:属性href的属性值的结尾的字符串为.pdf 的a元素
例如:img[src$=".gif"] 说明:src属性的属性值的结尾的字符串为.gif 的img元素
⑥ 任意子串属性值 选择器: 元素名[属性名~="属性值的 任意部分 字符串)"]
例如: a[href*="jingdong.com"] 说明:属性href的属性值的结尾的字符串为.jingdong.com的a元素
例如:img[src*="/img"] 说明:src属性的属性值的任意的字符串为/img 的img元素
⑦ 语言属性选择器:
例如:html[lang |="en"] 选择到语言为英文的html页面
2.5 伪类/伪元素 选择器
见另外一篇文章: 伪类/伪元素选择符/选择器 深入了解
伪类:通过选择器可以选择到一类元素,可能是0个,1个,多个,
伪元素:通过选择器可以选择到一个元素,例如:after :before :first-letter :first-line
2.6 组合选择器 选择器
见另外一篇文章:组合选择器深入了解
组合选择器就是多个选择器组合使用,是前面 几种 选择器的联合使用
简单组合选择器:后代选择器,子选择器,相邻兄弟选择器,后续选择器
复杂组合选择器:这个很多,具体学习
选择符/选择器 深入了解 全面的选择器学习相关推荐
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
- 好程序员web前端CSS选择符(选择器):表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
- CSS选择符(选择器)
CSS选择符(选择器): 表示要定义样式的对象 1.元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} ...
- [css选择器]总结:IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
- 常用的css选择符,CSS选择器五大基本选择符
原标题:CSS选择器五大基本选择符 1. *(通配符) *通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源.* ...
- java 选择 颜色的控件_JavaFX颜色选择器(ColorPicker)
颜色选择器控件允许用户从可用的颜色范围中选择颜色,或通过指定RGB或HSB组合设置其他颜色.JavaFX ColorPicker控件具有颜色选择器,调色板和自定义颜色对话框窗口. 创建ColorPic ...
- html的后代选择器,html5怎么使用后代选择器?html选择后代的两种方式详解!
在项目开发的过程中,同一个文档中可能会用到很多相同的标签,也有可能用到很多相同的类名,这就导致 html 在开发中选择器不好使用的问题,如果全部使用 id 选择器又不符合语义化的效果.这时候,我们就可 ...
- html如何同时选择多个选择器,JS中如何使用选择器选择多个元素
在jQuery中,可以使用以逗号(,)分隔的元素选择器列表--多个元素选择器,或*选择器来选择多个元素. 多个元素选择器可用于选取多个元素,需要使用逗号分隔每个元素. *选择器选取文档中的所有元素,包 ...
- CSS基础工作原理(一)——css规则与选择符器
css规则 为文档添加样式的三种方法:行内样式.嵌入样式.链接样式(此处按优先级排序) <div style="display:block">123</div&g ...
- html5后代选择符,css选择符有哪些?哪些属性可以继承?
属性的名字是一个合法的标识符,它们是CSS语法中的关键字.一种属性规定了格式修饰的一个方面.CSS选择器用于选择你想要的元素的样式的模式. css选择符有哪些?哪些属性可以继承?下面我们来看一下css ...
最新文章
- Oracle Logminer 做数据恢复 说明示例
- 从编解码算法到全链路RTC架构,揭秘淘系直播技术演进之路
- python程序设计上机实践第三章答案_20192419 实验三《Python程序设计》实验报告
- 【bzoj3329】Xorequ 数位dp+矩阵乘法
- boost 单io_serverce 异步多线程资源保护代码
- 音视频开发(9)--视频编解码的理论和实践
- idea 建nodejs 项目_三种方法带你新建SpringBoot项目
- avue-crud 会多出来空白的一列
- 句句真研—每日长难句打卡Day19
- JAVA常用工具类→Date、SimpleDateFormat、Calendar、System、Math
- mysql建表注意事项,关键字和保留字不能作为表名
- Android 开发高效工具之道
- 模电:集成运算放大器2
- python3爬虫扒云班课资源
- android10 imei横线,【报Bug】android10设备plus.device.getInfo获取imei为空
- XMU 1615 刘备闯三国之三顾茅庐(三) 【欧拉函数+快速幂+欧拉定理】
- 获取svg元素的高度和宽度(或其他属性)
- 物联网设备模糊:DIANE:识别应用程序中的模糊触发器,为物联网设备生成受限制的输入
- python量化分析系列之---5行代码实现1秒内获取一次所有股票的实时分笔数据
- Go netpoll I/O 多路复用构建原生网络模型之源码深度解析