学习《CSS选择器Level-4》不完全版
1 概述
1.1 前言
选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示。希望对程序员有所助益。
2 元素选择器
2.1 类型选择器-h1
类型选择器也可以称为标签名选择器,会选中文档中该类型元素的实例。
h1 {color: red;
}
复制代码
将文档中元素类型为h1的颜色设置成红色。
查看示例程序
2.2 通配选择器-*
通用选择器是一种特殊类型选择器,表示任何元素类型的元素。
* {color: red;
}
复制代码
设置文档中所有元素的颜色为红色。
3 属性选择器
3.1 属性存在选择器-[name]
h1[name] {color: red;
}
复制代码
选中元素 h1
中具有属性 name
的元素。
查看示例程序
3.2 属性值选择器
3.2.1 确切匹配-[title='cool']
h1[title='cool'] {color: red;
}
复制代码
匹配元素 h1
中包含属性 title
并且属性值是 cool
的元素。
查看示例程序
3.2.2 包含匹配-[title|='cool']
h1[title~='cool'] {color: red;
}
复制代码
匹配元素 h1
中包含属性 title
并且属性值中包含 cool
的元素。
查看示例程序
3.2.3 头部匹配-[title^='cool']
h1[title|='cool'] {color: red;
}
复制代码
匹配元素 h1
中包含属性 title
,并且属性值是 cool
的元素 或以 cool-
开头的元素。
查看示例程序
3.3 属性值子串选择器
3.3.1 头部匹配-[title^='cool']
h1[title^='cool'] {color: red;
}
复制代码
匹配元素 h1
中包含属性 title
,并且属性值串以 cool
开头的元素。
查看示例程序
3.3.2 尾部匹配-[title$='cool']
h1[title$='cool'] {color: red;
}
复制代码
匹配元素 h1
中包含属性 title
,并且属性值串以 cool
结尾的元素。
查看示例程序
3.3.3 部分匹配-[title*='cool']
h1[title*='cool'] {color: red;
}
复制代码
匹配元素 h1
中包含属性 title
,并且属性值串包含 cool
子串的元素。
查看示例程序
3.4 类选择器-.class
.red { color: red;
}
复制代码
匹配文档中 class
属性为 red
的元素并设置其颜色为红色。
查看示例程序
3.5 ID选择器-#id
#title { color: red;
}
复制代码
匹配文档中 id
属性为 title
的元素并设置其颜色为红色。
查看示例程序
4 语言学伪类
4.1 方向性伪类:dir
dir()
主要用于匹配符合某个方向性的元素,例如 :dir(ltr)
和 :dir(rtl)
,其中ltr是left to right简写,表示从左向右,而rtl是right to left,表示从右向左。
:dir(ltr) {color: red;
}
复制代码
匹配文字方向为从左到右的元素。
查看示例程序
4.2 语言伪类:lang
:lang(fr) {color: red;
}
复制代码
匹配语言为法语的元素并设置其颜色为红色。
查看示例程序
5 位置伪类
5.1 超链接伪类:any-link
匹配带有 href
属性的 <a>
、<link>
、<area>
等元素。
:any-link {color: red;
}
复制代码
匹配任意超链接,并设置其颜色为红色。
查看示例程序
5.2 超链接伪类:link
:link {color: red;
}
复制代码
匹配未被访问的超链接,并设置其颜色为红色。
5.3 超链接伪类:visited
:visited {color: blue;
}
复制代码
匹配访问过的超链接,并设置其颜色为蓝色。
查看示例程序
5.4 超链接伪类:local-link
:local-link {color: red;
}
复制代码
匹配本地超链接,并设置其颜色为红色。
5.5 目标伪类:target
<h1><a href="#content">三十课</a></h1>
<p id="content">程序员的笔记本</p>
<p id="content2">程序员的笔记本2</p>
复制代码
:target {color: red;
}
复制代码
点击 html
代码中的内部链接,链接的目标对象 id
为 content
的 p元素颜色变为红色。
6 用户行为伪类
6.1 用户行为伪类:hover
用户指针设备悬停于指定元素时,匹配该元素。
:hover {color: red;
}
复制代码
用户指针悬停于某元素,匹配该元素并将其设置其颜色为红色。
查看示例程序
6.2 用户行为伪类:active
:active {background: red;
}
复制代码
当特定元素处于激活状态时,设置元素背景色为红色。
查看示例程序
6.3 用户行为伪类:focus
:focus {background: red;
}
复制代码
当特定元素获得焦点,设置元素背景色为红色。
查看示例程序
6.4 用户行为伪类:focus-within
div:focus-within { border : 1px solid blue;
}
复制代码
当div中的子元素获得输入焦点时,设置div元素边框为1象素值的蓝色边框。
查看示例程序
7 时间轴伪类
7.1 时间伪类:current
在文档的语音渲染或是显示字幕期间,常会用到时间轴伪类。
:current(p) {color: red;
}
复制代码
以上规则定义了当前语音渲染段落的颜色为红色。
7.2 时间伪类:past
:past(p) {color: red;
}
复制代码
以上规则定义了以完成语音渲染段落的颜色为蓝色。
7.3 时间伪类:future
:future(p) {color: yellow;
}
复制代码
以上规则定义了以未进行语音渲染段落的颜色为黄色。
8 资源状态伪类
8.1 资源状态伪类:playing
:playing {border : 1px solid red;
}
复制代码
匹配当前播放状态的元素,并为其添加1象素的红色边框。
8.2 资源状态伪类:paused
:playing {border : 1px solid grey;
}
复制代码
匹配当前播放状态的元素,并为其添加1象素的灰色边框。
9 输入伪类
9.1 输入状态控制伪类:enabled
:enabled {color: red;
}
复制代码
匹配启用状态的元素并设置其颜色为红色。
9.2 输入状态控制伪类:disabled
:disabled{color: yellow;
}
复制代码
匹配禁用状态的元素并设置其颜色为黄色。
查看示例程序
9.3 只读伪类:read-only
:read-only {color: red;
}
复制代码
匹配只读状态的元素并设置其颜色为红色。
9.4 读写伪类:read-write
:read-write {color: yellow;
}
复制代码
匹配读写状态的元素并设置其颜色为黄色。
查看示例程序
9.5 伪类:placeholder-shown
:placeholder-shown {background: red;
}
复制代码
选中占位符为显示状态的元素并设置其背景色为红色。
查看示例程序
9.6 缺省项伪类:default
:default {color: red;
}
复制代码
匹配缺省的元素并设置其颜色为红色。
查看示例程序
9.7 选中项伪类:checked
:checked {height: 4em;
}
复制代码
匹配选中的元素并将其高度设成 4em
。
查看示例程序
9.8 不确定值伪类:indeterminate
不确定值伪类 :indeterminate
适用于其值处在不确定状态的元素。例如 : radio
元素组在未被初始选择的情况下就为不确定值状态。
:indeterminate {height: 4em;
}
复制代码
匹配不确定值元素并设置高度为 4em
。
查看示例程序
9.9 空值伪类:blank
空值伪类 :blank
用来匹配输入值为空的输入框,如 textarea
或 input
框。
:blank {background: red;
}
复制代码
目前该伪类兼容性较差。
9.10 合规性验证伪类:valid
:valid { color: red;
}
复制代码
匹配输入值合法的元素并设置其颜色为红色。
9.11 合规性验证伪类:invalid
:valid { color: blue;
}
复制代码
匹配输入值不合法的元素并设置其颜色为蓝色。
查看示例程序
9.12 范围伪类:in-range
:in-range {color: red;
}
复制代码
匹配输入值在定义范围内的元素并设置其颜色为红色。
9.13 范围伪类:out-of-range
:out-of-range {color: blue;
}
复制代码
匹配输入值不在定义范围内的元素并设置其颜色为蓝色。
查看示例程序
9.14 必填项伪类:required
:required { color: red;
}
复制代码
匹配定义为必填项的元素并设置其颜色为红色。
9.15 选填项伪类:optional
:optional { color: blue;
}
复制代码
匹配定义为选填项的元素并设置其颜色为蓝色。
查看示例程序
10 树形结构伪类
10.1 根结点伪类:root
伪类 :root
表示文档的根元素。例如,在DOM文档中,伪类 :root
与Document对象的根元素匹配。 在HTML中,就表示html元素。
:root {color: red;
}
复制代码
匹配文档根元素并定义其颜色为红色。
查看示例程序
10.2 空伪类:empty
:empty { color : red;
}
复制代码
匹配为空的元素并设置其颜色为红色。
查看示例程序
10.3 元素索引伪类:nth-child
p:nth-child(3n+1) {color: red;
}
复制代码
匹配第1,4,7,10等 p
元素并设置其颜色为红色。
查看示例程序
10.4 元素索引伪类:nth-last-child
p:nth-child(3n+1) {color: red;
}
复制代码
匹配倒数第1,4,7,10等 p
元素并设置其颜色为红色。
查看示例程序
10.5 首元素伪类:first-child
p:first-child { color: red;
}
复制代码
匹配第一个 p
元素并设置其颜色为红色。
查看示例程序
10.6 尾元素伪类:last-child
p:last-child { color: red;
}
复制代码
匹配最后一个 p
元素并设置其颜色为红色。
查看示例程序
10.7 唯一子元素伪类:only-child
p:only-child { color: red;
}
复制代码
匹配父元素只包含唯一子元素的元素 p
并设置其颜色为红色。
查看示例程序
10.8 类型索引伪类:nth-of-type
p:nth-of-type(3n+1) { color: red;
}
复制代码
匹配类型为 p
的第1,4,7,10等索引位置的元素并设置其颜色为红色。
查看示例程序
10.9 类型索引伪类:nth-last-of-type
p:nth-last-of-type(3n+1) { color: red;
}
复制代码
匹配类型为 p
的倒数第1,4,7,10等索引位置的元素并设置其颜色为红色。
查看示例程序
10.10 类型首元素伪类:first-of-type
p:first-of-type { color: red;
}
复制代码
匹配第一个类型为 p
的元素并设置及颜色为红色。
查看示例程序
10.11 类型尾元素伪类:last-of-type
p:last-of-type { color: red;
}
复制代码
匹配倒数第一个类型为 p
的元素并设置及颜色为红色。
查看示例程序
10.12 唯一类型元素伪类:only-of-type
p:only-of-type { color: red;
}
复制代码
匹配父元素只包含唯一类型为 p
子元素并设置其颜色为红色。
查看示例程序
11 逻辑组合选择器
11.1 分组选择器
h1 { color: red }
h2 { color: red }
h3 { color: red }
h4 { color: red }
复制代码
利用分组选则器,可以将上述CSS规则简写成下面的形式。
h1,h2,h3,h4 { color: red
}
复制代码
上述两种写法效果相同。
11.2 逻辑组合伪类:is
伪类 :is()
是一个以多个选择器做为参数的函数,匹配由其参数表示的元素。
目前兼容性较差。
*:is(:hover, :focus) {color: red;
}
复制代码
匹配伪类 hover
和 focus
的元素并设置其颜色为红色。
11.3 逻辑组合伪类:not
负向逻辑组合伪类 :not()
是一个以多个选择器做为参数的函数,匹配不在其参数表中的元素。
目前兼容性较差。
button:not([DISABLED]) {color : red;
}
复制代码
匹配不包含 DISABLED
属性的 button
元素并设置其颜色为红色。
11.4 逻辑组合伪类:has
目前兼容性较差。
a:has(> img) {border : 1px solid red;
}
复制代码
匹配包含 img
子元素的超链接并设置其边框为1象素红色。
12 组合选择器
12.1 后代选择器
h1 em {color: red;
}
复制代码
匹配 h1
的后代的 em
元素并设置其颜色为红色。
查看示例程序
12.2 子元素选择器->
h1 > em { color: red;
}
复制代码
匹配 h1
的子元素 em
并设置其颜色为红色。
查看示例程序
12.3 相邻兄弟选择器-+
h1 + h2 {color: red;
}
复制代码
匹配 h1
的相邻兄弟元素 h2
并设置其颜色为红色。
查看示例程序
12.4 兄弟选择器-~
h1 ~ h2 {color: red;
}
复制代码
匹配 h1
的后面的同级结点 h2
并设置其颜色为红色。
查看示例程序
13 结尾
13.1 参考文献
W3C Working Draft : Selectors Level 4 - 21 November 2018
W3scool : CSS 选择器参考手册
菜鸟教程 :CSS 选择器
MDN : CSS Selectors
13.2 结语
本文是@毛瑞依据CSS选择器规范4择取的部分CSS选择器内容编写而成。因本人水平有限,理解和翻译时难免有偏差和错误,还请程序员朋友多多指正!
文中一些选择器兼容性还很差,只能做为学习储备,不适用于实际产品中运用。
费力原创十分不易,请大家转载时一定要明确注明出处来自【三十课】!
转载于:https://juejin.im/post/5caef5d56fb9a0688360f754
学习《CSS选择器Level-4》不完全版相关推荐
- 学习《CSS选择器Level-4》不完全版 1
1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...
- 小和尚学习-CSS选择器
希望的灯一旦熄灭,生活刹那间变成了一片黑暗.--普列姆昌德 目录 基础选择器 ID选择器 元素选择器 类选择器 属性选择器 伪类选择器 伪元素选择器 组合选择器 后代选择器 子代选择器 相邻兄弟选择器 ...
- css设置 ul的内外边距,9月3日学习CSS选择器,背景设置,及内外边距知识总结
实例 html> 选择器 p:nth-of-type(2) { background-color: crimson; } 猪哥 朱老师 西门大官人 欧阳克 潘金莲 运行实例 » 点击 " ...
- Python学习,还在用正则或者bs4做爬虫吗?来试试css选择器吧
之前写的一些爬虫都是用的正则.bs4.xpath做为解析库来实现,如果你对web有所涉及,并且比较喜欢css选择器,那么就有一个更适合的解析库-- PyQuery.我们就用一个非常简单的小例子来看看c ...
- name选择器_这33个超级好用的CSS选择器,你可能见都没见过
作者:陈大鱼头 转发链接:https://mp.weixin.qq.com/s/tLD4Rfr2c-MAXXtbC7nEwQ 前言 CSS 选择器是 CSS 世界中非常重要的一环. 在 CSS 2 之 ...
- 33个高能CSS选择器让我受益匪浅
作者:陈大鱼头 github:KRISACHA 大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和<前端百题斩>pdf版(包括JS基础篇.浏览器 ...
- css a标签去掉下划线_这30个CSS选择器,你必须熟记(上)
CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色.布局.制作出漂亮的阴影效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举的实现,感觉就像魔法师一般, ...
- css 查看更多_在Scrapy中如何利用CSS选择器从网页中采集目标数据——详细教程(上篇)...
/前言/ 今天小编给大家介绍Scrapy中另外一种选择器,即大家经常听说的CSS选择器. /CSS基础/ CSS选择器和Xpath选择器的功能是一致的,都是帮助我们去定位网页结构中的某一个具体的元素, ...
- 地图选择器怎么用_简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用....
[ 这是简易数据分析系列的第 15 篇文章 ] 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进 ...
最新文章
- 在asp.net中解决cookies中文乱码问题
- CodeForces 689B	Mike and Shortcuts (bfs or 最短路)
- DVWA---文件包含
- 全流程解读:建立销售和营销模型的 9 个步骤
- JUC系列四:任务的取消与关闭
- 学习web前端开发大半年,迷茫了,感觉什么都没学会怎么破?
- mysql常见函数的实列
- 沁恒CH32V307母板+OPA4377运放模块-开源
- 77.(leaflet之家)leaflet图层显示与隐藏
- 10分钟教你阿里云环境下搭建iredmail邮件服务器
- web前端开发培训学院,前端校招面试题及解析大全,值得收藏!
- 微信官方多端框架Donut可将小程序编译成 Android 以及 iOS 应用了
- 昨天学了js的控制css样式,自己做了个算卦小程序
- 60佳灵感来自大自然的网页设计作品欣赏
- 数字逻辑设计(何建新)第二章
- GravitybCamp-链上云计算应用技术分享会
- 使用C4D灵动诠释宇舶表限量版陀飞轮全蓝宝石腕表的冰肌玉骨
- 浅谈angular的作用
- x-window简介
- 欧拉角计算xy轴与水平面夹角
热门文章
- Apache ZooKeeper - 集群中 Follow 的作用_非事务请求的处理与 Leader 的选举分析
- C++五子棋(一)——开发环境
- arm el2与el3_ARMv8的学习笔记
- 浙江大学计算机与机械工程,中国26所“机械工程”大学经调整、合并,浙大、西交、同济升级...
- 2层框架结构柱子间距_2分钟掌握五种不同类型的厂房结构,找厂房少绕弯!
- word 转html utf8 在线_pdf转word在线转换器:办公必备工具安利!
- React+webpack热更新配置
- matlab 矩阵序列R6(n),MATLAB___09年试题加答案
- 【C++】46.宏定义##连接符和符#的使用
- Java集合必会14问(精选面试题整理)