同级选择器_10-CSS3选择器详解
CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
CSS3的现状
- 浏览器支持程度不够好,有些需要添加私有前缀
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
应对的策略:渐进增强
- (1)坚持渐进增强的原则:让低版本浏览器能正常访问页面,高版本的浏览器用户体验更好。【重要】
比如说,同样是一个头像,可能在低版本的浏览器中,头像方的;在高版本的浏览器中,头像是圆的。
- (2)考虑用户群体。
- (3)遵照产品的方案。
参考链接:
- 渐进增强 VS 优雅降级 | 简书
- 渐进增强和优雅降级之间的不同(面试题目)
浏览器的版本问题
由于CSS3普遍存在兼容性问题,为了避免因兼容性带来的干扰,浏览器的建议版本为:
- Chrome浏览器 version 46+
- Firefox浏览器 firefox 42+
如何使用手册
在查看CSS参考手册时,需要注意以下符号:
比如说,{1,4}表示可以设置一至四个参数。
下面讲CSS3的基础知识。本文讲一下 CSS3 选择器的内容。
CSS3 选择器
我们之前学过 CSS 的选择器,比如:
``` div 标签选择器
.box 类名选择器 #box id选择器 div p 后代选择器 div.box 交集选择器 div,p,span 并集选择器 div>p 子代选择器 * : 通配符 div+p: 选中div后面相邻的第一个p div~p: 选中的div后面所有的p
```
CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与 jQuery 中所提供的绝大部分选择器兼容。
属性选择器
属性选择器的标志性符号是 []。
匹配含义:
^:开头 $:结尾 *:包含
格式:
- E[title] 选中页面的E元素,并且E存在 title 属性即可。
- E[]选中页面的E元素,并且E需要带有title属性,且属性值完全等于abc。
- E[attr~=val] 选择具有 att 属性且属性值为:用空格分隔的字词列表,其中一个等于 val 的E元素。
- E[attr|=val] 表示要么是一个单独的属性值,要么这个属性值是以“-”分隔的。
- E[title^="abc"] 选中页面的E元素,并且E需要带有 title 属性,属性值以 abc 开头。
- E[title$="abc"] 选中页面的E元素,并且E需要带有 title 属性,属性值以 abc 结尾。
- E[title*="abc"] 选中页面的E元素,并且E需要带有 title 属性,属性值任意位置包含abc。
比如说,我们用属性选择器去匹配标签的className,是非常方便的。
这里我们用class属性来举例。代码举例:
```html
CSS3-属性选择器
简介
- 姓名:
- 密码:
- 性别: 男 女
- 兴趣: 写代码
E[attr]
E[attr~=attr]
E[attr|=attr]
E[attr*=val]
E[attr^=val]
E[attr$=val]
```
最后来张表格:
结构伪类选择器
伪类选择器的标志性符号是 :。
CSS中有一些伪类选择器,比如:link、:active、:visited、:hover,这些是动态伪类选择器。
CSS3又新增了其它的伪类选择器。这一小段,我们来学习CSS3中的结构伪类选择器:即通过结构来进行筛选。
1、格式:(第一部分)
- E:first-child 匹配父元素的第一个子元素E。
- E:last-child 匹配父元素的最后一个子元素E。
- E:nth-child(n) 匹配父元素的第n个子元素E。注意,盒子的编号是从1开始算起,不是从0开始算起。
- E:nth-child(odd) 匹配奇数
- E:nth-child(even) 匹配偶数
- E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
理解:
(1)这里我们要好好理解父元素的含义,它指的是:以 E 元素的父元素为参考。
(2)注意:以上选择器中所选到的元素的类型,必须是指定的类型E,如果选不中,则无效。这个要好好理解,具体可以看CSS参考手册中的E:nth-child(n)的示例。我们可以理解成:先根据选择器找到选中的全部位置,如果发现某个位置不是类型E,则该位置失效。
(3)另外,E:nth-child(n)这个属性也很有意思。比如,针对下面这样一组标签:
html
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
上方代码中:
- 如果选择器写成li:nth-child(2),则表示第2个 li。
- 如果选择器写成li:nth-child(n),则表示所有的li。因为此时的 n 表示 0,1,2,3,4,5,6,7,8.....(当n小于1时无效,因为n = 0 也是不会选中的)
- 如果选择器写成li:nth-child(2n),则表示所有的第偶数个 li。
- 如果选择器写成li:nth-child(2n+1),则表示所有的第奇数个 li。
- 如果选择器写成li:nth-child(-n+5),则表示前5个 li。
- 如果选择器写成li:nth-last-child(-n+5),则表示最后5个 li。
- 如果选择器写成li:nth-child(7n),则表示选中7的倍数。。
上面列举的选择器中,我们只要记住: n 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。
2、格式:(第二部分)
- E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
- E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
- E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
- E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
既然上面这几个选择器带有type,我们可以这样理解:先在同级里找到所有的E类型,然后根据 n 进行匹配。
3、格式:(第三部分)
- E:empty 匹配没有任何子节点(包括空格等text节点)的元素E。
- E:target 匹配相关URL指向的E元素。要配合锚点使用。
举例:
我们可以把多个伪类选择器结合起来使用,比如:
如果想把上图中,第一行的前三个 span 标红,我们可以这样使用结构伪类选择器:
css dt:first-child span:nth-of-type(-n+3) { color: red; }
最后来张表格:
伪元素选择器
伪元素选择器的标志性符号是 ::。
1、格式:(第一部分)
- E::before 设置在 元素E 前面(依据对象树的逻辑结构)的内容,配合content属性一起使用。
- E::after 设置在 元素E 后面(依据对象树的逻辑结构)的内容,配合content属性一起使用。
E:after、E:before在旧版本里是伪类,在 CSS3 这个新版本里是伪元素。新版本里,E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
举例:
```html
生命壹号
```
效果如下:
上图可以看出:
- 通过伪元素选择器,就可以添加出类似于span标签的效果(记得要结合 content 属性使用)。
- 通过这两个属性添加的伪元素,是行内元素,需要转换成块元素才能设置宽高。
2、格式:(第二部分)
- E::first-letter 设置元素 E 里面的第一个字符的样式。
- E::first-line 设置元素 E 里面的第一行的样式。
- E::selection 设置元素 E 里面被鼠标选中的区域的样式(一般设置颜色和背景色)。
E::first-letter 的举例:
E::first-line的举例:
最后来张表格:
同级选择器_10-CSS3选择器详解相关推荐
- Vue 深度选择器:deep()与::v-deep详解
Vue 深度选择器:deep()与::v-deep详解 在Vue中,::v-deep 和 :deep() 都用于修改CSS选择器的作用域. 区别在于: :deep() 是一个伪类选择器,可以用于将CS ...
- CSS3 animation-fill-mode详解
CSS3 animation-fill-mode详解 定义 animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式. 默认情 ...
- android 日期对话框,Android日期选择器对话框DatePickerDialog使用详解
调用Android原生日期选择器对话框就是DatePickerDialog,具体内容如下 在Android4.4系统上效果如图: 在Android5.0以上效果如图: 1.Activity的onCre ...
- Element el-select 选择器(下拉框)详解
点此查看全部文字教程.视频教程.源代码 本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 ...
- android第三方打开文件,Android第三方文件选择器aFileChooser使用方法详解
aFileChooser是android平台上的一个第三方文件选择器,其在github上的项目主页是:https://github.com/iPaulPro/aFileChooser aFileCho ...
- CSS3动画详解(图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- CSS3 Filter详解(改变模糊度 亮度 透明度等方法)
文章目录 1.模糊 2.灰度 3.亮度 4.对比度 5.饱和度 6.色相旋转 7.反色 8.阴影 9.透明度 10.褐色 CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 ...
- css3 object-fit详解
上传头像的时候遇到了头像变形的问题,最后通过object-fit: cover完美解决了.这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能. object-fit理解 CSS3 backgro ...
- CSS3属性详解:动画详解
前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是 ...
- CSS3 Tranform详解
转自: http://hi.baidu.com/vital_hh/blog/item/497d59f09eb68849352acca8.html CSS3 Tranform的作用就是实现一些变换效果, ...
最新文章
- 如何看待2016年安防市场?
- Windows 2000/NT/XP管理员密码丢失解决方法
- mooc北京大学python_实用Python程序设计
- Django从理论到实战(part13)--include函数
- 人大副教授:本科生一定要做科研吗?九大灵魂拷问
- unity快捷放置物体操作
- [Godot][Blender] 通过 Blender 将 fbx 批量转为 gltf 用于 godot
- linux端口解析,linux中查看和开放端口详解
- 一统江湖的大前端(7)React.js-从开发者到工程师
- 用python画图代码-【Matplotlib】利用Python进行绘图
- PHP预定义变量 PHP_EOL
- VeryCD新建2组中国eMule服务器
- 基于ResNetRS的宝可梦图像识别
- 计算机系统中三级存储器结构,计算机三级存储体系(1)
- 计算机xp bios密码设置方法,如何设置电脑的密码
- 光威猛将240固态掉盘开卡教程
- 亲属卡额度是什么意思_卡神养卡15条心得!教你如何卡奴变卡神!
- ART/Dalvik,JVM/Dalvik 虚拟机的区别
- cpu是几核的怎么查看
- linux中安装openoffice,及解决转pdf时中文乱码或者中文不显示问题【离线】
热门文章
- 有益的CountDownLatch和棘手的Java死锁
- oracle数值型转为char类型,PLSQL: Oracle函数to_char转化数字型指定小数点位数的技巧...
- centos8 kernel source 安装_什么?你在物理机上安装Oracle总失败?那就试试Docker吧
- MacOS 系统使用命令安装软件包
- Java short 无符号右移_char类型byte类型或short类型进行无符号右移遇到的神奇问题...
- 服务器一键建php网站,搭建服务器 - 我的lnmp一键安装报错 - php中文网博客
- python中链表和数组_数据结构笔记(一):数组、链表|python基础教程|python入门|python教程...
- 【开源项目】基于C++使用ffmpeg和QT开发播放器
- python api接口生成_Django 自动生成api接口文档教程
- C语言应用笔记:C语言typedef关键字及其使用