css3选择器

一.css3概念

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂 。

二.渐进增强和优雅降级

1.渐进增强

在网页开发中,渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面,满足最基本的功能,再针对高级浏 览器进行效果,交互,追加各种功能以达到更好用户体验,换句话说,就是以最低要求,实现最基础功能为基本,向上兼容。

2.优雅降级

在网页开发中,优雅降级指的是一开始针对一个高版本的浏览器构建页面,先完善所有的功能。然后针对各个不同的浏览器进行测试,修复,保证低级浏览器也有基本功能就好,可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。也就是以高要求,高版本为基准,向下兼容。

**区别:**1.)如果你采用渐进增强的开发流程,先做一个基本功能版,然后针对各个浏览器进行渐进增加,增加各种功能。相对于优雅降级来说,开发周期长,初期投入资金大。好处就是提供了较好的平台稳定性,维护起来资金小, 长期来说降低开发成本。

2.)采用优雅降级,这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版,而对于功能尚未确定的 产品,优雅降级不失为一种节约成本的方法。

三.选择器

1.层级选择器

1)子代选择器

E>F:所有的F被设置,且F为E的子孩子

2)后代选择器

E F:E中的所有F被设置

3)相邻兄弟选择器

E+F:此F元素的相邻的下一个兄弟被设置

4)通用选择器

E~F:此F元素后的所有亲兄弟被设置

2.属性选择器

属性,属性,... 有此属性的全被设置

E属性 E中含此属性的设置

1)完全匹配:

E属性=a E中此属性=a的被设置

2)包含匹配:

E属性\~=a E中此属性含a的被设置

3)模糊匹配:

属性\^a 以a开头的被设置

属性$a 以a结尾的被设置

属性\*a 含有a的被设置

3.伪类选择器

1)结构伪类选择器

X:first-child 第一个子元素

X:last-child 最后一个子元素

X:nth-child n是几,就是第几个元素

偶数:2n/even

基数:2n+1/2n-1/odd

X:only-child 仅有一个子元素

X:root 根元素,HTML就是根元素

X:empty 无任何子元素(包含文本)

2)目标伪类选择器

E:target 选择匹配E的所有元素,且匹配元素被相关URL指向

3)UI元素状态伪类选择器

E:enable form表单中可用状态下匹配

E:disabled form表单中不可用状态下匹配

E:focus 聚焦 会匹配E

E:checked 处于选中状态的元素

E:selection 被选中后的状态

4)否定伪类选择器

E:not(s) s以外的E匹配

5)动态伪类选择器

E:link 未被访问状态

E:visited 已被访问状态

E:active 被激活的状态

E:hover 鼠标悬停状态(IE6以下浏览器仅支持a:hover)

相关推荐
欣欣之王来了6 分钟前
前端开发学习路线图:2026年Vue方向最新版
前端·学习·架构·项目·vue3教程
夏幻灵9 分钟前
前端八股:Vue2 与 Vue3 的核心区别:响应式、Composition API 与性能优化
前端
ss27337 分钟前
AI全栈实战 | 3.5-01 Python 全栈前端最小集:不会 React 也能做出能看的后台,关键就一条线
前端·python·react.js
人工智能培训40 分钟前
数字孪生驱动大模型工业知识库:为具身机器人植入领域专业经验
大数据·linux·服务器·前端·人工智能
维克兜率天1 小时前
【维克】通道突破:画出趋势的“轨道线“
前端·数据库·人工智能
Ai-_Man1 小时前
从聊天框到正式文档:AI导出鸭瞄准AI大模型应用的“最后一公里”
开发语言·前端·javascript·人工智能·小程序
乌暮1 小时前
拆解网页的底层逻辑:用费曼学习法讲透 HTML 与 CSS
前端·css·学习·html
陈随易11 小时前
bm2,Node.js 与 Bun 项目部署新选择
前端·后端·程序员
福兮说12 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas