/*1.HTML选择器*/
        /*h1{color:red}
        h3{color:aqua}
        li{color:#ff00cc}*/

        /*2.类选择器*/
        /*
        .cc{color:red}
        li.cc{background-color:#dddddd;}
        li.dd{color:blue}
        */

        /*3. id选择器 */
        #hid{color:red;}

        /* 选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]*/
        #sid{color:green}
        .sc{color:blue}
        span{color:red;}
        
        /*4. 关联选择器*/
        ol li{color:green}

        /*5. 组合选择器 */
        h1,h2,h3,h4{
           font-size:30px; 
        }

        /*6. 伪类选择器 */
        a:link {color: #FF0000; text-decoration: none}             /* 未访问的链接 */
        a:visited {color: #00FF00; text-decoration: none}          /* 已访问的链接 */
        a:hover {color: #FF00FF; text-decoration: underline}     /* 鼠标在链接上 */
        a:active {color: #0000FF; text-decoration: underline}     /* 激活链接 */

/* 选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]*/

关系选择器

       /*ul中的所有子li标签都采用此样式*/
        /* ul li{color:red;} */

        /*ul中的直接子li标签采用此样式（注意ol中的li不是）*/
        ul > li{color:blue;}

        /*紧邻div的一个p兄弟标签采用此样式*/
        /* div+p{color:red;} */
        
        /*div后面所有兄弟p标签都采用此样式*/
        div~p{color:red;}

CSS中的属性选择器

       /*含有title属性的li标签采用此样式*/
        li[title]{color:red;} 

        /*含有title属性值为bb的li标签采用此样式*/
        li[title="bb"]{color:red;} 

        /*含有class属性值（以空格分隔开）中有aa的li标签采用此样式*/
       li[class~="aa"]{color:red;} 

       /*含有class属性值（以-分隔开)以aa开头的li标签采用此样式*/
       li[class|="aa"]{color:red;}

       /*class属性值是以b子串开头的*/
       li[class^="b"]{background-color:#ddd;} 

       /*class属性值是以dd结尾的li标签*/
       li[class$="dd"]{background-color:#ddd;}

       /*class属性值中含有bb的li标签*/
       li[class*="bb"]{background-color:#ddd;}