CSS权威指南学习笔记-2

    今天主要学习了CSS中的选择器，CSS选择器（selector)是css的核心，通过利用selector可以为html文档添加各种样式，并且能够更好的维护html页面的样式，为提高整个网站的前端页面样式的维护性起了决定性的作用。

     今天的主要学习内容如下：

      1.元素选择器（element selector）

         最常见的元素选择器是html元素   eg:h1{color:black;}

      2.类选择器（class selector）

         要应用样式而不考虑具体涉及的元素，这时最常用使用的是类选择器。

         eg: html:<p class="warning">when handling plutonium,care must be taken to avoid the </p>

                       <p>With plutoninum,<span class="warning">the possibility of implosion              is</span>aaa</p>

                css: .warning{font-weight:bold;}

          这时，所有class属性为warning值的元素都会应用bold样式

          2.1  多类选择器

                一个class值包含一个词列表 ，各个词之间用空格分离。

               eg:html:<p class="urgent warning">when handling plutionium,care must be taken</p>

                    css: .warning{font-weight:bold;}

                           .urgent{font-style:italic;}

                           .warning.urgent {background:silver;}

                 这时这三个样式都会应用到此段文字。

         3.id选择器

               id选择器与类选择器类似，不同的是id选择器前面有一个#,如#first,更重要的是同一个id值只能在页面中使用一次。

         4.后代选择器

               h1  em{color:gray;}

               这个样式将应用到以h1为祖先的所有em元素。

         5.伪类和伪元素选择器

              5.1伪类选择器

                   :link  指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。

                        a:link{color:blue;}--所有为访问过的超链接将显示为蓝色

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

                        a:visited{color:red;}--所有访问过的超链接将显示为红色

                  

                   :focus 指示当拥有输入焦点的元素

                   :hover 指示鼠标停留在哪个元素

                   :active 指示被用户输入激活的元素

                   很多web页面对a都有下面的样式 ：

                              a:link {color:navy;}

                              a:visited{color:gray;}

                              a:hover{color:red;}

                              a:active{color:yellow;}

                 :first-child 用于选择元素的第一个子元素

                   eg:html <div><p><em>test</em></p></div>

                        css  p:first-child{font-weight:bold;}

                   将选择作为第一个子元素的段落

              5.2伪元素选择器

                    伪元素选择器还有:first-line     :first-letter      :before     :after.