css选择器总结

规则结构：每个规则都有连个基本部分，选择器和声明块，如h2{font：large/150% sans-serif}（注意：斜线分隔用

                 来设置了字体和行高两个属性，只有在这里才允许font声明中出现斜线，其他关键字都用空格）

元素选择器：通常是某个html元素，如p、h3、em、html、body等

通配选择器：*，如 *{color：red}

类选择器：如 .className{}

多类选择器：通过把两个类选择器链接在一起，仅可选择同时包含这些类名的元素（类名顺序不限），如：

                    <p class="urgen warning">紧急又是警告</p>

                    .urgen{font-weight:bold}      .warning{color : #FF0000}

ID选择器：如：#idName{}，在一个html文档中，ID选择器仅使用一次

属性选择器：1.简单属性选择器，如 h1[class]{color：silver}表示有class属性的元素字都设为银色

                    2.属性值选择器，如 planet[class="test"] {font-weight：bold}

                    3.部分属性值选择器：如：p[class~=warning] {font-weight : bold}表示包含类名中warning类的元素字体都加粗

                   4.子串匹配属性选择器：如：p[class^="bar"]-->选择class属性以bar开头的所有p元素

                                                              p[class$="bar"]-->选择class属性以bar结尾的所有p元素

                                                              p[class*="bar"]-->选择class属性包含子串bar的所有p元素

特定属性选择器：如*[lang |= "en"] {color : white}，选择lang属性等于en或者以en开头的所有元素，常见的用途是匹配语言值

后代选择器：h1 em {color：grey}选择h1元素中包含的所有em元素，不管这个em元素是否被其他元素包裹

选择子元素：h1 > p {color : red}选择h1元素的所有em子元素（若在h1中又被其他元素包裹就不叫子元素了）

选择相邻兄弟元素：如 h + p {color : red} 选择紧接着h1元素后出现的所有段落，h1与p元素要有共同的父元素

伪类选择器：1.链接伪类： ：link 指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚

                                         ：visited 指示作为已访问地址超链接的所有锚

                    2.动态伪类： ：focus 当前拥有输入焦点的元素

                                         ：hover 鼠标停留的元素

                                         ：active 被用户输入或点击鼠标激活的元素

选择第一个子元素：：first-child（需要亲测体验(•́へ•́╬)）

伪元素选择器：未完待续，持续更新。。。。。。。。。。。