回味CSS选择器
作者: 图恩分类: 编程开发阅读: 1006发布时间： 2020-04-12 16:30:18
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
表示了在（它父元素的）子元素列表中，最后一个给定类型的元素
HTML
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 依旧会应用到表格元素