回味CSS选择器
作者: 图恩分类: 编程开发阅读: 756发布时间： 2020-04-12 16:30:18
发现很多选择器已经忘了叫啥了，借此看一下MDN的文档，本文只是抛砖引玉，记录下阅读过程中的一些新知识，或是当作以后查阅的手册。文档地址
1. 通配选择器
一个星号()就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,.warning 和.warning 的效果完全相同
类型选择器
通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素.
类选择器 （.classname）
会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效
ID 选择器 （#idname）
会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。
属性选择器
[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
CSS
#test-vue-id {
.asd:last-of-type {
color: red;
}
}
:link
:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active
:checked
表示任何处于选中状态的radio, checkbox 或select元素中的option
:default
该选择器可以在 button、checkbox、radio, 以及option
可以标注初始值，易用使用，省去了一些代码逻辑
HTML
CSS
:checked {
color: red;
}
:default {
color: orange;
}
:not()
用来匹配不符合一组选择器的元素
:not() 伪类不能被嵌套，这意味着 :not(:not(...)) 是无效的。
由于伪元素不是简单的选择器，他们不能被当作 :not() 中的参数，形如 :not(p::before) 这样的选择器将不会工作。
可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。
这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素
123
[attr|=value] 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。 [attr^=value] 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。 [attr$=value] 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。 [attr*=value] 表示带有以 attr 命名的属性，且属性值包含有 value 的元素。123
选择器列表 常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。 span, div { border: red 2px solid; } 后代选择器 当使用一个或多个的空白字符连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) div span { background-color: DodgerBlue; } 子选择器 当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素 div > span { background-color: DodgerBlue; } 通用兄弟选择器 兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。 p ~ span { color: red; } 相邻兄弟选择器 当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。 img + p { font-style: bold; } 伪类选择器 CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态 出了很多新的伪类选择器哦，感受一下。 :active 被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。 这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover和 :visited。为了正常加上样式，需要把 :active 的样式放在所有链接相关的样式后，这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active。 :last-of-type 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素 HTML12
123