CSS选择器汇总

207 阅读2分钟

「这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战

什么是选择器,套用w3school的话就是:

在 CSS 中,选择器是选取需设置样式的元素的模式

下面就来总结一下都有哪些选择符

1.id选择器(#myid)

2.类选择器(.myclassname)

3.标签选择器(div,h1,p)

4.相邻选择器(h1+p) 指定元素的直接后继元素 所有h1标签后面的第一段

5.兄弟节点组合选择器(X ~ Y)会选择跟在X后面的所有Y元素

6.子选择器(ul > li)

7.后代选择器(li a)

8.通配符选择器(*)

9.属性选择器 X[title]]

10.属性值选择器X[href="foo"]属性值包含foo的

11.属性值开头的 X[href^="href"]

12.属性值以什么结尾的 X[href$=".jpg"]

13.伪类选择器 a:hover input[type=radio]:checked .clearfix:before .clearfix:after X:not(selector) 取反伪类,非 p::first-line 选中某标签的部分内容,如第一段或者d第一行、第一个字等。(伪标签是由两个冒号 :: 组成的。) X:nth-child(n) 第几个子元素 X:nth-last-child(n) 倒数第几个子元素 X:nth-of-type(n) 根据元素的类型来进行选择,选中第几个X元素 X:nth-last-of-type(n) 倒数第几的x标签元素 X:first-child 第一个孩子 X:last-child 最后一个孩子 X:only-child 只有一个孩子的父标签 X:only-of-type 只有一个子标签的 X:first-of-type 选择指定标签的第一个兄弟标签

注:选择器之前不会覆盖,除非里面的值覆盖

另外关于选择器优先级

选择器有存在优先级,

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。

规则:

!important > 行间样式 > ID > class | 属性 > 标签选择器 | 伪类选择器 > 通配符选择器