「这是我参与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 | 属性 > 标签选择器 | 伪类选择器 > 通配符选择器