CSS选择器

luochen123
306 阅读5分钟

这是我参与更文挑战的第8天，活动详情查看： 更文挑战

这篇主要是整理下常用的CSS选择器，也算是对这块知识点的一个复习。

基本选择器

  1. 通用选择器(*)
  2. 元素选择器(div)
  3. 类选择器(.btn)
  4. id选择器(#btn)

组合选择器

名称选择器作用备注
多元素选择器E,F同时匹配所有E和F元素
后代元素选择器E F匹配所有E元素内的F元素
子元素选择器E>F匹配所有E元素的子元素F
相邻元素选择器E+F匹配所有紧随E元素之后的同级F元素
同级元素通用选择器E~F匹配所有在E元素之后的同级F元素CSS3

div p 与div>p区别在于：前者是div元素内所有的p元素，后者是所有父级元素是div元素的p元素

属性选择器

选择器示例作用备注
E[attr]div[title]匹配所有具有attr属性的E元素
E[attr=val]div[class=xxx]匹配所有attr属性等于val的E元素
E[attr~=val]td[title~=xxx]匹配所有attr属性中具有val的E元素
E[attr|=val]p[lang|=en]匹配所有attr属性等于以val开头的E元素，主要用于lang，如en-us，en
E[attr^="val"]a[src^="https"]匹配所有attr属性以val开头的E元素CSS3
E[attr$="val"]div[class$="xx"]匹配所有attr属性以val结尾的E元素CSS3
E[attr*="val"]p[class*="xx"]匹配所有attr属性中包含val的E元素CSS3

伪类选择器

动态伪类选择器

选择器示例作用备注
E:linka:link匹配元素被定义了超链接但未被访问过链接选择器
E:visiteda:visited匹配元素被定义了超链接并且已经被访问过链接选择器
E:hoverbutton:hover用户鼠标停留在匹配元素上用户行为选择器
E:activea:acitve匹配元素被激活用户行为选择器
E:focusinput:focus匹配元素获取焦点用户行为选择器

CSS定义中，a:hover必须置于a:link和a:visited后才有效；a:active必须置于a:hover之后才有效

目标伪类选择器

选择器示例作用备注
E:targeth2:target指定包含片段标志符的URI的目标元素CSS3

语言伪类选择器

选择器示例作用备注
E:langp:lang(en)匹配使用指定语言

UI状态元素伪类选择器（CSS3）

选择器示例作用备注
E:checkedinput[type=checkbox]:checked匹配被选中的input元素input类型为radio和checkbox
E:enabled匹配没有设置disbaled的表单元素
E:disabled匹配禁用的表单元素
E:read-only匹配设置了readonly属性的元素
E:required匹配设置了required的元素

结构性伪类选择器

选择器作用备注
E:first-child选择父元素下的第一个子元素E等同于E:nth-child(1)
E:last-child选择父元素下的最后一个子元素E等同于E:nth-last-child(1)
E F:nth-child(n)选择父元素E的第n个子元素，且该元素为F；n可以为整数，关键词(even,odd)，公式(2n+1)n的起始值为1
E F:nth-last-child(n)选择父元素E的倒数第n个子元素，且该元素为F；n可以为整数，关键词，公式
E:nth-of-type(n)匹配父元素下的第n个子元素E
E:nth-last-of-type(n)匹配父元素的倒数第n个子元素E
E:first-of-type匹配父元素的首个E类型的子元素
E:last-of-type匹配父元素的最后一个E类型的子元素
E:only-child父元素仅包含一个子元素E
E:only-of-type父元素仅包含E元素一种类型的子元素
E:empty选择没有子元素的E元素，而且该元素也不包含文本节点
E:root匹配元素E所在的文档的根元素html文档中，根元素始终是html

E:nth-child(n)和E:nth-of-type(n)的区别

:nth-child表示父标签下的第n个子元素，且该元素就是E元素；nth-of-type表示父标签下第n个E元素，它不一定是第n个子元素。

:nth-last-child与nth-last-of-type的区别与之类似，只不过是从后倒数过来。

<section>
    <div>我是第一个标签div</div>
    <p>我是第一个p标签</p>
    <p>我是第二个p标签</p>
</section>

<style>
p:nth-child(2) {
    color: red;
}
p:nth-of-type(2) {
    color: blue;
}
</style>

上述代码效果如下图：

image.png

结论：

p:nth-child(2)表示这个元素是p标签，并且是第二个子元素。如果在div插入个非p标签的元素，则p:nth-child(2)不匹配任何元素。

p:nth-of-type(2)表示父标签下的第二个p元素，所以无论在div后边插入多少个非p标签的元素，匹配到的仍然是第二个p元素。

如果去掉div元素，则两者匹配到的都是第二个p标签元素。

否定伪类选择器

选择器作用备注
E:not(F)匹配所有除了F以外的E元素input:not([type="submit"]) 匹配input，但是对submit类型不生效

伪元素选择器

选择器作用备注
E::before在E元素之前插入一些内容
E::after在E元素之后插入内容
E::selection匹配元素中被用户选中或处于高亮状态的部分,只用于color,backaground,cursour,outline属性CSS3
E::first-letter匹配E元素中的文字的第一个字
E::first-line匹配E元素中的第一行文字

伪元素的效果需要通过添加一个实际的元素才能达到。CSS3规范中要求使用双冒号(::)来表示伪元素，除了低于IE8的浏览器以外，大部分的浏览器都支持伪元素的单冒号和双冒号两种写法。如果要兼容较低版本IE，推荐用单冒号

avatar
文章
阅读
粉丝