选择器 · 编程开发笔记

## :-: 不常用 ``` ---------- 不太常用 ---------- 选中div下一个兄弟元素节点p、 div + p { background: red; } 选中div下面所有为p的兄弟元素节点p，并列结构下、 div ~ p { background: red; } 选中属性值包含a(两边有单词边界)的元素、 div[data~="a"] { background: red; } 选中 a 开头，或者 a- 开头的元素、 div[data|="a"] { background: red; } 选中以a开头的元素、 div[data^="a"] { background: red; } 选中以a结尾的元素、 div[data$="a"] { background: red; } 选中只要包含a的任意元素、 div[data*="a"] { background: red; } ---> 兼容性差、改变input提示颜色、 input::placeholder { color: red; } 改变字体文本选中后的样式、 div::selection { 只能设置三个样式 color: red; background-color: red; text-shadow: red; -- 阴影 } ``` ``` ----------> 伪类选择器、(被选中元素的一种状态) E:not(s) 选中除了最后一个 :last-of-type 的所有li元素、 ul li:not(:last-of-type) { border-bottom: 1px solid red; } 选中跟标签、相当于html 绝对最父级、 :root{ background-color:red; } 被锚点触发的状态样式、<a href="#div">点击后</a> div:target{ color: red; } li --> 选中同级下·第一个 ul > li:first-child {} li --> 选中同级下·最后一个 ul > li:last-child {} 选中ul里面只有单独一个的li (独生子) ul > li:only-child { color: red; } 选中指定的li、(css索引从1开始) ul > li:nth-child(3) { color: red; } 选中奇数的li、(css索引从1开始、但n是自然数，它是从0开始的) 或者 :nth-child(add) ul > li:nth-child(2n+1) { color: red; } 选中偶数的li、或者 :nth-child(even) ul > li:nth-child(2n) { color: red; } 倒过来，选中最后一个、 ul > li:nth-last-child(1) { color: red; } ---------- 以上都考虑其他元素，对它的影响、比如说选中第一个 li:nth-child(1) 但同级元素下第一个实际为span标签、那么不会选到、 ``` ## :-: 较常用 ``` ----------> 比较常用该类型 li 的第一个、 ul > li:first-of-type{ color: red; } 该类型 li 的最后一个、 ul > li:last-of-type{ color: red; } 该类型 li 在同级下只有一个时选中、(独生子、特有) ul > li:only-of-type{ color: red; } 该类型 li 的指定个、 ul > li:nth-of-type(3){ color: red; } ul > li:nth-of-type(add){ color: red; } ul > li:nth-of-type(even){ color: red; } 选中从2开始，到最后一个的、 ul > li:nth-of-type(n+2){ color: red; } 选中div标签为空节点的、<div></div> <div></div> div:empty{ background-color: red; } 当前input是复选框、这个实例是点击input触发checked状态的css，当前input:checked+span在被触发时就可以选中下一个为span的标签了，并且利用它改变css样式、 input:checked + span{ background-color: red; } input:checked + span::after{ content:" Hello Wrold~ "; color: #ccc; } disabled是选中被禁止状态的标签， <input type="text" disabled> input:disabled{ background-color: red; } 选中被禁止修改状态的标签、 <input type="text" readonly value="这个是禁止修改的状态。可以选择，但不能删改(只读)"> input:read-only{ color: red; } ```