html5复合选择器,web前端练习31----Css,选择器(基本选择器,复合选择器,属性选择器,伪类,伪元素,优先级,雪碧图练习)...
参考文档:https://man.ilovefishc.com/css3/
一、基本选择器:
1通配符选择器 *
2元素选择器 element
3类选择器 .class
4id选择器 #id
5内联样式 style
二、复合选择器:
1交集选择器
element.class || element#id
2并集选择器
element1,element2,element3,...
3后代选择器
element1 element2
4子元素选择器
element1 > element2
5相邻兄弟选择器
element1 + element2
6通用兄弟选择器
element1 ~ element2
三、属性选择器:
属性选择器:可以根据元素中的属性或属性值选取元素,并指定样式
常用属性:
[attribute] 选择器用于选取带有指定属性的元素。
[attribute=value]选择器用于选择带有指定值属性的元素
四、伪类选择器
最常用的伪类选择器
1):active 点击按下生效,不仅用于a元素,其他元素也生效。
https://man.ilovefishc.com/pageCSS3/dotActive.html
2):hover 鼠标指针浮动在元素上面生效,不仅用于a元素,其他元素也生效。
https://man.ilovefishc.com/pageCSS3/dothover.html
3):focus 输入框获取焦点以后生效。
https://man.ilovefishc.com/pageCSS3/dotfocus.html
4):checked 单选框,多选框,select元素中的option 选中状态
https://man.ilovefishc.com/pageCSS3/dotChecked.html
五、子元素的伪类选择器
大排行:
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
https://man.ilovefishc.com/pageCSS3/dotfirst-child.html
:last-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
https://man.ilovefishc.com/pageCSS3/dotlast-child.html
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。(可以设置奇数,偶数)
https://man.ilovefishc.com/pageCSS3/dotnth-child-n.html
小排行:
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
https://man.ilovefishc.com/pageCSS3/dotfirst-of-type.html
:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
https://man.ilovefishc.com/pageCSS3/dotlast-of-type.html
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。
https://man.ilovefishc.com/pageCSS3/dotnth-of-type.html
六、否定伪类选择器
:not(selector):从已选中的元素中剔除某些元素
https://man.ilovefishc.com/pageCSS3/dotnot.html
七、伪元素选择器
伪元素:元素的特定部分指定样式
::first-letter 选择首字母,或者以一个汉字
https://man.ilovefishc.com/pageCSS3/dotfirst-letter.html
::first-line 选定首行。
https://man.ilovefishc.com/pageCSS3/dotfirst-line.html
::before 被选元素的内容前面插入内容。
https://man.ilovefishc.com/pageCSS3/dotBefore.html
::after 被选元素的内容后面插入内容。
https://man.ilovefishc.com/pageCSS3/dotAfter.html
八、选择器优先级:
内联样式优先级 1000
id选择器优先级 100
类和伪类优先级 10
元素选择器优先级 1
通配符*优先级 0
继承来的样式 没有优先级
1当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后比较,
2但是注意,选择器的优先级计算不会超过他的最大数量级。
(比如11个元素选择器相加,也不会找过类选择器)
3如果选择器的优先级一样,则使用靠后的样式
4并集选择器的优先级是单独计算。
div,p,#p1,.hello{};
5可以在样式的最后,添加一个!important,则此时该样式会获得一个最高优先级,
此时优先级比内联样式还高。
代码示例:
我是p元素
九、伪类选择器顺序
伪类选择器的优先级是一样的,所以后面的会覆盖前面的
代码示例:
十、例子练习:CSS sprite(雪碧图)
实现功能:正常状态下是一个图片,鼠标放上去是一个图片,鼠标点击时是一张图片
第一张图片 第二张图片第三张图片
代码如下:
做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,
这个闪烁会造成一次不佳的用户体验,
产生问题的原因:
背景图片是以外部资源的形式加载进网页的,浏览器每加载一次外部资源就需要单独发送一次请求,
但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源
我们这个练习,一上来浏览器只会加载play1.png,由于hover和active的状态没有触发,所以play2.png和play3.png没有并没有加载。
当hover被触发时,浏览器才去加载play2.png
当active被触发时,浏览器才会加载play3.png
由于图片加载需要一定的时间,所以在加载和显示过程会有一段时间,背景图片无法显示,导致出现闪烁的情况。
为了解决该问题,可以将三张图片整合为一张图片,加载一次,就不会出现闪烁的问题了。
然后通过background-position来切换要显示的图片的位置,这种技术叫做图片整合技术(CSS-Sprite雪碧图)
优点:
1.将多张图片整合为一张图片,浏览器只需要请求一次,可以同时加载多张图片,提高了访问效率和用户体验。
2.将多张图片整合为一张图片,减小了图片的总大小,提高请求速度,增加了用户体验
把三张图片合成一张图片(雪碧图)改变图片要显示的位置:
上述代码优化如下:
html5复合选择器,web前端练习31----Css,选择器(基本选择器,复合选择器,属性选择器,伪类,伪元素,优先级,雪碧图练习)...相关推荐
- 前端基础入门之背景background-image 、 雪碧图与渐变
文章目录 背景 1. PS 的基本设置 2. 背景 练习 1:线性渐变效果的背景图 练习 2:按钮点击效果 雪碧图与渐变 3. 雪碧图 4. 线性渐变 5. 径向渐变 背景 1. PS 的基本设置 工 ...
- JAVA自动生成雪碧图sprites和样式CSS文件(包含原始图标CSS、雪碧图CSS)
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题(八)
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
- web前端开发-HTML+CSS基础入门 课程笔记
https://www.bilibili.com/video/BV1yx411d7Rc?p=3&share_source=copy_web 目录 概述 术语 版本和兼容性 开发环境的准备 第一 ...
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- web前端学习中CSS,JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
- html5培训靠谱吗,html5培训和web前端有靠谱的吗?
html5培训和web前端培训有靠谱的吗? 我是2016年应届毕业生工商管理专业,同年6月7日我这天完全结束了自己的学生时代,经朋友介绍在毕业的第二天,我只身一人来到了兄弟连(www.itxdl.cn ...
- 【前端小实战】百度新闻雪碧图及动画(CSS sprites)
文章目录 前言 ~ 雪碧图 一.页面效果展示 二.代码实现解析 三.完整代码 前言 ~ 雪碧图 雪碧图,英文原名叫 CSS sprites,其实就是融合了各种资源的图片,图片里面可能会有一个角色的 ...
最新文章
- Python语言学习之字母L开头函数使用集锦:logging日志用法之详细攻略
- 3种设计模式java小程序_Java设计模式之单例模式(3种实现方式)
- 修改用户名_Word办公技巧:如何更改文档修订者的用户名?
- 2020计算机二级题库第14PPT,计算机二级考试MSOffice考精彩试题库ppt操作题附问题详解.doc...
- /etc/fstab 文件配置项简单介绍
- Unity3D 5.x 简单实例 - 发射炮弹
- offer上不写具体薪资合理吗_拿着OFFER当白菜?职场菜鸟不带这么玩的
- mysql 参照完整性规则_MySQL存储引擎你们知道多少?
- 小程序triggerevent 传参_开源wwto:小程序跨端迁移解决方案——微信转其他小程序...
- 诺顿病毒库手工下载地址及英文补丁下载
- 分布式定时任务调度框架
- Windows中删除文件时提示没有权限怎么办?
- pt100转4-20mA,一转一/二转二热电阻温度变送器
- 复盘二: 了解自我和管理自我,诚惶诚恐,保持敬畏-- 宁向东的清华管理学课总结
- 【UI设计No7】单页
- 用非上市股权评估的思路看Polkadot估值
- 使用 xrdp 远程登录ubuntu出现黑屏或者花屏
- Windbg 内核调试,寄存器窗口没有数据
- Python项目——万花尺
- 灌溉控制器 节水灌溉自动控制器