1.         /* relationship selectors */
    2.         /* 下一个满足条件的兄弟元素节点 */
    3.         div + p{
    4.             background: red;
    5.         }
    6.         /* 满足条件的所有兄弟元素节点 */
    7.         div ~ p {
    8.             background: black;
    9.         }
    11.         /* attribute selectors */
    12.         /* 选择拥有独立属性名为a的元素 */
    13.         div[data ~= 'a']{
    14.             background: blue;
    15.         }
    16.         /* 选择属性名中以a开头或以a-开头的元素  */
    17.         div[data |= 'a']{
    18.             background: blueviolet;
    19.         }
    20.         /* 选择属性名以a开头的元素节点 $：以属性名结尾的元素节点 */
    21.         div[data ^= 'a']{
    22.             background: brown;
    23.         }
    24.         /* 选择属性名中含有a的元素节点 */
    25.         div[data *= 'a']{
    26.             background: cornflowerblue;
    27.         }
    29.         /* pseudo-element selectors */
    30.         /* E:placeholder 输入框提示信息 只能这只字体颜色 */
    31.         /* E::selection 字体选中， 只能设置字体颜色，背景颜色，阴影 */
    33.         .che:checked + .text{
    34.             background: green;
    35.         }
    36.         .che:checked + .text::after{
    37.             content: "显示信息";
    38.             color: #ffffff;
    39.         }