CSS选择器总结

超、凢脫俗 2022-06-03 03:52 303阅读 0赞

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