精通CSS与HTML设计模式 第三章（CSS选择符与继承）

      一、 类型，类和ID选择符

             这个比较简单就不多说

      二、定位和群组选择符

            群组选择符：body,div,h1{}              作用于一组元素

            后代选择符：div #mydiv {}              作用于某一环境下的元素

            子选择符：#mydiv >*{}                  作用于mydiv下所有直接子元素

            兄弟子元素（单一）：li+li                  作用于li元素后的一个兄弟li元素

            兄弟子元素（所有）：li~li                  作用于li元素后的所有li元素

            第一个节点:li:firstchild                     作用于兄弟节点中的第一个子元素

           

           兼容性：只有群组选择和后代选择符  IE6支持，  所有其他选择器在IE7  其他主流浏览器中支持

 

代码

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
     < title > 无标题页 </ title >
     < style type = " text/css " >
        p
        {
            border: solid 1px;
        }
        .class1
        {
            padding: 5px;
        }
        .class2
        {
            letter - spacing: 10px;
        }
        #myp
        {
            background - color: Silver;
        }
        p, ol, li
        {
            border: 1px solid red;
            padding - left: 10px;
            font - family: Monospace;
            margin: 10px;
            margin - left: 0px;
        }
        ol
        {
            margin - left: 0px;
            padding - left: 40px;
            margin - top: 20px;
        }
        div  * .my - class
        {
            font - size:  1 .2em;
            font - weight: bold;
        }
        #my - id p
        {
            background - color:  red;
        }
        #my - id 
        {
            border: 3px solid Blue ;
        }
        #my - id  >*  
        {
            border: 3px solid black ;
        }
      
        li  +  li
        {
            font - style: italic;
            color: Blue;
        }
        h1 + div
        {
           color:Green;
            
            }
     </ style >
</ head >
< body >
     < h1 >
        类型，类和ID选择器 </ h1 >
     < p >
        类型 </ p >
     < p  class = " class1 " >
        一个类增加了内边距 </ p >
     < p  class = " class1 class2 " >
        两个类增加了字间距 </ p >
     < p id = " myp " >
        id选择符背景color </ p >
     < h1 >
        地位和群组选择器 </ h1 >
     < p >
        p.my - class </ p >
     < div id = " my-id " >
     <!-- 123 -->
         < ol >
             < li > div ol li </ li >
             < li > div ol li </ li >
             < li >
                 < p  class = " my-class " >
                    div ol li </ p >
             </ li >
             < li > 888 </ li >
         </ ol >
         < div > 123 </ div >
     </ div >
     < h1 > 兄 </ h1 >
     < div > 弟 </ div >
     < div > 二弟 </ div >
</ body >
</ html >

 

        

            二、属性选择器

                  selectior[属性]                作用：只要含有此属性都可以使用

                  selectior[属性=值]            作用：有此属性并且要等于此值

                  兼容性：IE6支持不支持， 其他浏览器支持良好

代码

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
     < title > 无标题页 </ title >
     < style type = " text/css " >
      code{ white - space:pre}
      p[title]{ background - color:red}
      p[title = ' Third paragraph ' ]{ background - color:Blue}
     </ style >
</ head >
< body >
    < h1 > 属性选择符 </ h1 >
    < p > 这段话没有附加 < code > title </ code > 属性。 </ p >
   
    < p title = " Second " >
    < code > p[title ~= "" ] </ code >
    </ p >  
   
    < p title = " Third paragraph " >
   这个是third paragraph
    </ p >
    < p title = " #4 paragraph " >
   这个是 # 4  paragraph
    </ p >
</ body >
</ html >

 

          三、伪类

            element:first-letter{}

            .class:first-letter{}

             #id:first-letter{}

             element:first-line{}

            .class:first-line{}

             #id:first-line{}

             注：此伪类只对终端块状元素搭配，它们对内联元素或终端化元素不起作用   div 是属于终端块状元素

            兼容性：IE6 不支持， IE7后来修改了这个BUG  

             

代码

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
     < title > 无标题页 </ title >
     < style type = " text/css " >
     p:first - letter
     {
       color:Red;
         }
     div:first - letter
     {
         color:Red;
         }
      span:first - letter
      {
           color:Red;
          }    
     </ style >
</ head >
< body >
   < p > 我是 </ p >
   < div > 我是 </ div >
   < span > 我是 </ span >
</ body >
</ html >

 

         

          四、伪类选择符

                a:link                         未被浏览过的超链接

                a:visited                     已经被浏览过的超链接

                a:hover                      鼠标悬停在上面       

                a:fouce                      在非IE上获取到焦点  （无效）

                a:active                      在IE上获取到焦点   （个人测试结果 可用）

               兼容性：IE6只支持  a:hover    其他浏览器支持良好   

        五、子类选择符

              .class{}                           父类

              .class.subclass{}             子类   子类会继承下所有父类的属性

             应用：  <p class="父类 子类">矩形</p>   

            个人体会： 除了比较符合面向对象的思想但，其余没什么分别  （个人不推荐）

 

             

                   

     

转载于:https://www.cnblogs.com/chongzi/archive/2010/11/24/1886607.html