之前学的的迷糊了,也不知道什么会什么不会了,跑去面试了。别人列出一堆css选择器,本以为选择器没啥的,结果到那个多类选择器翻车了,.a.b选择同时含a,b类名的,很尴尬所以回来仔细整理了一下。目前根据W3C手册所知,选择器一共44个,特此分类记录复习一下(分类依据可能不合理,只是为了方便自己记忆)
一.基本选择器(4个)
选择器 |
选择目标 |
css |
* |
通配符,选择所有元素 |
2 |
.class |
类选择器,选择类名为class的元素 |
1 |
#ID |
id选择器,选择id为ID的元素 |
1 |
element |
元素选择器,选择element元素 |
1 |
二.结合选择器(6个)
选择器 |
选择目标 |
css |
.a.b |
多类选择器,选择同时拥有类名为a,b的元素 |
|
a b |
后代选择器 ,选择a元素后代的所有b元素 |
1 |
a,b |
同级选择器 ,选择a元素和b元素 |
1 |
a>b |
子代选择器,选择a元素的直接子代b |
2 |
a+b |
直接相邻兄弟选择器,选择紧跟着a元素的b元素 |
2 |
a~b |
通用兄弟选择器,选择前面有a的所有b元素 |
3 |
注意事项: 1. 相邻兄弟选择器,之间可以有文本元素,不影响,其它不可。2.在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。
三.伪元素(4个)
选择器 |
选择目标 |
css |
:first-letter |
选择首字 |
1 |
:first-line |
选择首行 |
1 |
:before |
在元素之前插入 |
2 |
:after |
在元素之后插入 |
2 |
注意事项: 1. 所有伪元素都必须放在该伪元素选择器的最后面 2. 伪元素是一种假想的元素,插入到页面中代替某个元素但是并不出现在文档源代码中,由用户代理动态构建。
四.属性选择器(7个)
选择器 |
选择目标 |
css |
[attr] |
简单属性选择器,选择含有attr属性的元素 |
2 |
[attr=value] |
具体值属性选择器,选择attr属性值等于value的元素 |
2 |
[attr~=value] |
选择attr属性中含有value词条的元素 |
2 |
[attr|=value] |
选择attr属性以value-开头,或者等于value的元素 |
2 |
[attr*=value] |
子串匹配,选择attr属性子串包含value的所有元素 |
3 |
[attr^=value] |
选择attr属性以value开头的元素 |
3 |
[attr$=value] |
选择attr属性以value结尾的元素 |
3 |
五.伪类(23个)
表单相关(3)
选择器 |
选择目标 |
css |
:checked |
选中的input元素 |
3 |
:disabled |
选中禁用的input元素 |
3 |
:enabled |
选中启用的input元素 |
3 |
超链接相关,love-focus-hate.(5)
选择器 |
选择目标 |
css |
:link |
未被访问的连接 |
3 |
:visited |
已经被访问的连接 |
3 |
:focus |
获取焦点的元素 |
3 |
:hover |
鼠标悬浮的元素 |
3 |
:actived |
活动的元素 |
3 |
同一父元素下的目标选择(9)
选择器 |
选择目标 |
css |
p:only-child |
选择其父元素下的唯一子元素p下的所有元素 |
3 |
p:only-of-type |
选择属于其父元素唯一的 p元素的每个 p元素 |
3 |
p:first-of-type |
选择属于其父元素的首个p 元素的每个 p 元素。 |
3 |
p:last-of-type |
选择属于其父元素的最后 p元素的每个 p元素 |
3 |
p:nth-child(n) |
选择属于其父元素的第n个子元素的每个 p 元素 (n从1开始) |
3 |
p:nth-last-child(n) |
从最后一个子元素开始计数 |
3 |
p:nth-of-type(n) |
选择属于其父元素第n个p元素的每个p元素 |
3 |
p:nth-last-of-type(n) |
从最后一个元素开始计数 |
3 |
p:last-child |
选择属于其父元素最后一个子元素每个p元素 |
3 |
其它(6)
选择器 |
选择目标 |
css |
:root |
选择文档根元素 |
3 |
:lang(language) |
选择带有以 "language" 开头的 lang 属性值的元素 |
2 |
:empty |
选择没有子元素的元素(包括文本节点) |
3 |
:target |
选择当前活动的元素,锚点指向的元素 |
3 |
:not(selector) |
选择非某个元素的所有元素 |
3 |
::selection |
选择被用户选取的元素部分 |
3 |
六.CSS权重
- 最高级别!important
- 行内式 1000
- ID选择器 100
- 类选择器、伪类、属性选择器 10
- 元素选择器、伪元素 1
- 其它为0
最新文章
- [BZOJ3729]Gty的游戏
- [leetcode]题型整理之用bit统计个数
- 用html5的canvas画布绘制贝塞尔曲线
- iOS App 获取从后台返回前台时的页面
- MySQL Plugin 'InnoDB' init function returned error
- mysql limit查询优化
- ELK——为调试 Logstash Grok 表达式,安装 GrokDebuger 环境
- Python学习(1)
- Struts之ForwardAction
- cloneNode小结
- C#入门经典第六章函数-2-委托
- 【滚动数组】【状压dp】Gym - 100956F - Colored Path
- JavaScript随笔
- 数据库无法连接JDBC
- mysql4 - 高级操作
- Android源码解析——AsyncTask
- 约定Jenkins构建脚本
- 【bzoj1150】[CTSC2007]数据备份Backup 模拟费用流+链表+堆
- Gson学习文档
- 【新手向】阿里云上ubuntu+flask+gunicorn+nginx服务器部署(二)项目部署
热门文章
- 2、misa统计SRR结果
- 4、linux-grep awk sed and cuf sort uniq join
- Entity Framework Code-First(9.8):DataAnnotations - Column Attribute
- Struts2学习第三课 Action
- 微信小程序自学第二课:app及页面的生命周期、使用setData绑定数据
- If,for,range混合使用笔记-(VBA视频教程2:使用IF进行逻辑判断)
- bzoj1227: [SDOI2009]虔诚的墓主人(树状数组,组合数)
- nginx丢弃http包体处理
- 60个DevOps开源工具,你在用哪些?
- 「模拟赛20180306」回忆树 memory LCA+KMP+AC自动机+树状数组