css 属性选择器和其他选择器的多种使用方式，很解决实际应用中的问题。

        /* 1.根据属性选择器来获取标签  */
        div[style="display:block"] {
            font-size: 100px;
        }

        /* 2.根据属性选择器内的部分属性值来获取标签 */

        a[href*="myweb"] {
            color: red;
        }

        /* 3.根据^ 以什么什么开始 */
        a[href^="http"] {
            color: red;
        }

        /* 4.根据 $ 以什么什么结尾  这里类似与正则验证的开始结尾标识符 */
        a[href$=".com"] {
            color: red;
        }

        /* 5.根据自定义属性选择 */
        a[data-name="web"] {
            color: red;
        }

        /* 6.使用~ 来选择多属性情况得选择器 */
        /* <div data-img="img img2"></div> */
        /* 这种情况下我们可以使用多属性选择器 */
        a[data-img~="img2"] {
            color: red;
        }

        /* 7.使用:not()选择器来操作 */
        a:not(.name) {
            color: red;
        }

        /* 8.使用片段选择器 */
        /* 比如 第一行  第一个字符 */
        p::first-line {
            font-size: 16px;
        }

        p::first-letter {
            font-size: 16px;
        }