CSS选择器总结
发表于 2017-06-23
更新于 2024-05-23
分类于 技术专栏
阅读量 2533
字数统计 8746
前言
在前不久的项目中,实习小妹妹在一个全局的样式中使用了下面这个CSS选择器:
1#content{ 2 & div:first-child{ 3 height: 100% 4 } 5}
对应的html结构大致是:
1<div id="content"> 2 <div> 3 ...... 4 </div> 5</div>
实习妹子大致的意思是想要让content下的子元素div的高度100%,但是貌似她没有真正理解first-child
的意义,从而导致这个全局的样式让
所有页面都出现了问题,然后我就只能帮忙修复。不过自己其实也并没有完全弄清,借着这个问题,有理由总结一下CSS的所有选择器。
1 基本选择器
基本选择器也就是这几种: */Tag/.class/#id
,分别为通用元素选择器/标签选择器/class选择器/id选择器,非常地简单,就一笔带过了。
2 多元素选择器
多元素选择器有:
选择器 | 含义 | CSS标准 |
---|---|---|
E F | 后代选择器(包含选择器), 选择E元素下所有的F元素,也就是所有的后代F元素 | CSS2.1以及之前 |
E,F | 群组选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 | CSS2.1以及之前 |
E > F | 子选择器,选择E元素下所有的子元素F,记住是第一代元素 | CSS2.1以及之前 |
E + F | 相邻兄弟选择器,选择紧邻E元素的同一层级上的所有F元素 | CSS2.1以及之前 |
E ~ F | 通用选择器,匹配任何在E元素之后的同级F元素 | CSS3 |
对应的demo如下:
3 属性选择器
属性选择器有:
选择器 | 含义 | CSS标准 |
---|---|---|
E[att] | 用于选取带有指定属性的元素 | CSS2.1以及之前 |
E[att=val] | 用于选取带有指定属性和值的元素 | CSS2.1以及之前 |
E[att~=val] | 用于选取属性值中包含指定词汇的元素,该值必须是整个单词,要么是独立的整个单词,要么是后面跟着空格的整个单词 | CSS2.1以及之前 |
E[att(这是竖线)=val] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词,要么是独立的整个单词,要么是后面跟着-的整个单词 | CSS2.1以及之前 |
E[att^=val] | 匹配属性值以指定值开头的每个元素,注意与竖线操作符区别开来 | CSS3 |
E[att$=val] | 匹配属性值以指定值结尾的每个元素 | CSS3 |
E[att*=val] | 匹配属性值中包含指定值的每个元素,注意与~操作符区别开来 | CSS3 |
demo以及讲解可以参考:
注意:
因为这个markdown会将竖线当成换列,加转义字符\也没有用。
4 动态伪类选择器
这类选择器有:
选择器 | 含义 | CSS标准 |
---|---|---|
E:link | 链接伪类选择器,选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 | CSS2.1以及之前 |
E:visited | 链接伪类选择器,选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上, | CSS2.1以及之前 |
E:active | 用户行为选择器,选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上 | CSS2.1以及之前 |
E:hover | 用户行为选择器,选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover | CSS2.1以及之前 |
E:focus | 用户行为选择器,选择匹配的E元素,而且匹配元素获取焦点 | CSS2.1以及之前 |
没有太多的坑,就不再细讲
5 目标伪类选择器
该类选择器只有一个:
选择器 | 含义 | CSS标准 |
---|---|---|
E:target | 匹配文档中特定锚点被点击后的效果 | CSS3 |
demo如下:
6 UI元素状态伪类选择器
该类选择器有:
选择器 | 含义 | CSS标准 |
---|---|---|
E:checked | 选中状态伪类选择器,匹配选中的复选按钮或者单选按钮表单元素 | CSS3 |
E:enabled | 启用状态伪类选择器,匹配所有启用的表单元素 | CSS3 |
E:disabled | 不可用状态伪类选择器,匹配所有禁用的表单元素 | CSS3 |
E::selection | 匹配用户当前选中的元素 | CSS3 |
大部分都是常用的,也就不多说了。 |
注意 最后的selection需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)。
7 结构伪类选择器
该类选择器有:
选择器 | 含义 | CSS标准 |
---|---|---|
E:fisrt-child | 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 | CSS2.1以及之前 |
E:first-line | 匹配E元素的第一行 | CSS2.1以及之前 |
E:first-letter | 匹配E元素的第一个字母 | CSS2.1以及之前 |
E:before | 在E元素之前插入生成的内容 | CSS2.1以及之前 |
E:after | 在E元素之后插入生成的内容 | CSS2.1以及之前 |
E:last-child | 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同 | CSS3 |
E:root | 选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同 | CSS3 |
E F:nth-child(n) | 选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0. | CSS3 |
E F:nth-last-child(n) | 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配最后一个元素,与last-child等同 | CSS3 |
E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 | CSS3 |
E:nth-last-of-type(n) | 选择父元素内具有指定类型的倒数第n个E元素 | CSS3 |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素,与E:nth-of-type(1)等同 | CSS3 |
E:last-of-tye | 选择父元素内具有指定类型的最后一个E元素,与E:nth-last-of-type(1)等同 | CSS3 |
E:only-child | 选择父元素只包含一个子元素,且该子元素匹配E元素 | CSS3 |
E:only-of-type | 选择父元素只包含一个同类型子元素,且该子元素匹配E元素 | CSS3 |
E:empty | 选择没有子元素的元素,而且该元素也不包含任何文本节点 | CSS3 |
demo代码如下:
注意
first-child
伪类选择器选择是它父元素的第一个孩子的所有元素,这个父元素可以为任意的元素,比如body
/div
/section
等等,所以p:first-child
可以选择大部分p标签。另外伪类有更高的优先级比元素选择器。p:first-child
会覆盖掉div > p
的样式:nth-child
注意与nth-of-type
的区别!可以参考demo看出二者的不一样!only-child
注意与only-of-type
的区别
8 否定伪类选择器
该类选择器只有一个:
选择器 | 含义 | CSS标准 |
---|---|---|
E:not(F) | 匹配所有除元素F外的E元素 | CSS3 |
demo如下:
9 问题
承接最开始的问题,想必大家都清楚使用first-child会带来的问题了吧?而且应该也能给出对应的解决方案了吧?
参考
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 CSS选择器总结 的内容有疑问,请在下面的评论系统中留言,谢谢。