CSS选择器用法

:-: 不常用

        ----------  不太常用  ----------
        选中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:nol(s)  选中除了最后一个 :last-of-type 的所有li元素、
        ul li:nol(: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><!-- 注释在css中不算节点，但空格算 --></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;
        }