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树中才可以