CSS选择器总结

 css样式中的选择器简介
            1.元素选择器,如p,h2,span,a,div等,格式: p{ 样式属性 },多个html元素一起声明属性 h1,h2,h3{ 样式属性 }
              选取所有的元素为*,格式:*:{样式属性}
            2.类选择器
              .+class的的属性名
            格式:
            .classname{样式属性}
            元素名+.+class的属性名:格式:p.waring{样式属性}:表示类属性名中包含warning的p元素
            3.ID选择器
            格式:#ID{样式属性}
            example:#top1{样式属性}
            4.属性选择器:根据元素的属性来进行选择元素
            格式:元素名[属性名] 或者 *[属性名]
            (1)简单属性选择器
                img[alt]:带有alt属性的所有img元素
                *[title]:带有title属性的多所有元素
                a[href][title]:同时拥有href和title属性的a元素
            (2)具体属性选择器
                根据属性值来选择元素
                example: a[href="http://www.baidu.com"]{font-weight:bold;}
                同时匹配多个属性
                example: p[class="warning"][title="important"]{font-weight:bold}
            (3)部分属性选择器,匹配的
                <div title="intro 1">...</div>
                <div title="intro 2">...</div>
                <div title="intro 3">...</div>
                <div title="animal intro">
                格式:div[title~="intro"]:可以将两种类型都选择出来
                如果写成下面的格式再用上面的方法进行选择是选择不到的.
                <div title="intro-1">...</div>
                <div title="intro-2">...</div>
                <div title="intro-3">...</div>
               子串匹配属性选择器.
                div[title^="intro"]{样式属性} //title已intro开头的div元素
                div[title$="intro"]{样式属性} //title以intro结尾的div元素
                div[title*="intro"]{样式属性} //title中包含"intro"子串的div元素
            5.派生类选择器
            (1) 后代选择器:用空格连接2个或多个选择器。空格的含义为：…的后代。
            example:
            body li{样式属性}:body下的所有li
            h1 span{样式属性}:h1下的所有span
            .warning li{样式属性}:用于warning类的元素的li
            div.warning li{样式属性}:拥有 warning类的div元素的后代
            ul li li{样式属性}:ul下包含在li元素下所有的li元素
            (2.)
            子元素选择器:只能选择某元素的直接后代
            ul>li{样式属性}:ul元素的直接li子元素,这种选择应该对应到dom树中才可以