CSS系列------选择器和选择器的优先级

1.1.基本选择器

  • 通配符选择器（*）
          通配符选择器的使用方法如下
    *{margin:0px; padding:0px;} //*代表所有的

  • ID选择器(#)
    　　    ID选择器的使用方式如下： 
    *#intro {font-weight:bold;}//也可以省略通配符 
     #intro{font-weight:bold;} //两种方式是一样的。

     
     不同于其他选择器,id选择器有以下特点
     规范： 同一个id，在一个网页中只能标注一个元素。
    　　如果有同名id ，则在CSS中用ID选择器时,依旧会匹配所有的同名id元素。只是这么使用的时候会有以下的弊端：
                  1.不符合规范，因为规范要求的是一个id只能被一个元素使用。
                  2.语义的二义性。一般id我们都是作为标示符使用的，一个id只能用来标注一个元素。
                  3.在JS DOM（getElementById）操作或者是jquery("#xx")选择页面中元素时，返回的仅是第一个被找到的素。

  • 类选择器（.）
        类选择器使用比较简单，使用方式如下：

    *.important {color:red;}   //第一种使用方式
     .important {color:red;}  //第二种使用方式，推荐第二种

     

  • 属性选择器([])
              属性选择器用来选择指定属性的 HTML 元素。使用方式如下：
    [title]{ color:red; }  //为带有 title 属性的所有元素设置样式：

[title~=hello] { color:red; }//为包含指定值的 title 属性的所有元素设置样式

    属性选择器一览表
    选择器描述
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。 

     ========================================================================================================================
       在属性选择器中 [attribute~=value] 与 [attribute*=value] , [attribute|=value] 与 [attribute^=value] 的用法 在描述上很相似，很容易混淆：
    <img title="hello world"/>

      对于以上的元素  [title~=hello],[title*=hello]均能匹配，但是 [title~=hell]不能匹配，而[title*=hell]可以匹配,
               
     因为[attribute~=value] 匹配时要求value是一个“单词”，而 [attribute*=value]匹配时，是以正则表达式规则进行匹配
    

    同理，也可以类推出 [attribute|=value] 与 [attribute^=value]也是已类似的规则匹配，前者要求是以单词开头，而后者仅仅要求以xxxxx字符串开头即可.

    注： 这里所说的单词，并不是我们严格意义上的单词，比如 asdasd wasdas, 这里 asdasd wasdas对于计算机来说就是两个单词。但是as@re# 这种含有特殊字符的对于计算机来说就不是单词。
    

    

     
    

    • 

  • 伪类选择器（：）

        CSS2规则中所允许使用的伪类选择器
    

    

    

    CSS3中伪类选择器使用以及各浏览器的支持情况
    

    


    属性描述CSS
    

    
:active
向被激活的元素添加样式。
1

    

    
:focus
向拥有键盘输入焦点的元素添加样式。
2

    

    
:hover
当鼠标悬浮在元素上方时，向元素添加样式。
1

    

    
:link
向未被访问的链接添加样式。
1

    

    
:visited
向已被访问的链接添加样式。
1

    

    
:first-child
向元素的第一个子元素添加样式。
2

    

    
:lang
向带有指定 lang 属性的元素添加样式。
2

    
    

    

     
    










    ===========================================================================================================

    常见的CSS3的规则      
    

    


    属性描述CSS
    

    
:nth-child()
匹配父元素的第n个子元素。
3

    

    
:nth-of-type()
匹配某父元素下第几个某一个类型的元素
3

    

    
:empty { sRules }
匹配没有任何子元素（包括text节点）的元素
3

    

    
:checked { sRules }
匹配用户界面上处于选中状态的元素

    (用于input type为radio与checkbox时)    		
3
















    















    
















    

    
      
      





    CSS3的这些规则大部分在IE--8中都是不能使用的，  关于CSS3的一些伪类选择器及其使用，详细请见CSS参考手册
    

    

     
    

    • 



    

  • 伪元素选择器（：或者：：）
     
    

    

     常见的伪元素选择器如下：
    

    


    选择符版本描述
    













































    


    
:first-letter/E::first-letter
CSS1/3
设置对象内的第一个字符的样式。














































    

    
:first-line/E::first-line
CSS1/3
设置对象内的第一行的样式。














































    

    
:before/E::before
CSS2/3
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用














































    

    
:after/E::after
CSS2/3
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用














































    

    
::placeholder
CSS3
设置对象文字占位符的样式。




























    

    
::selection
CSS3
设置对象被选择时的颜色。















    














    
















    

















    

    

      CSS3推荐使用::写法，用以区分伪类选择器和伪元素选择器，但是使用:写法依旧有效。

      但是在使用:first-letter/E::first-letter时，IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨    着，需留有空格或换行。

    

















    • 














































2.基本选择器的组合


   基本选择器组合结果的复杂选择器无外乎以下几种：兄弟选择器，子选择器，后代选择器,组合选择器,群组选择器。


    

  •  兄弟选择器（+）

         兄弟选择器又称邻近选择器，选择邻近的元素.使用方式如下：    

    

    selector1+selector2{
} //由两个基本选择器，==》组合选择器
    

    

    • 

  • 子选择器（>）

       子选择器，选择的是直接后代中所有符合条件的元素。
    

    

         selector1>selector2{
　　    color:red;
      }
    

    

    • 

  • 后代选择器（空格）

    　　后代选择器，选择的是子孙后代中所有符合条件的元素
    

    

    使用方式：

selector1 selector2{
  color:red;
}  //A B是基本选择器
    

    

     
    

    • 

  • 组合选择器（）

         组合选择器，是两个基本选择器同时使用的情况，匹配需同时满足多个基本选择器
    

    

    使用方式如下：

selector1selector2{
      color:red;
     }
    

    
  
    • 

  • 群组选择器（,）

         群组选择器:选择器同时使用时，多个选择器之间是相互独立的
    • 

  • 

    

    selector1,selector2{

} //第一种
=========================
========================= 两种使用方式，效果是一样的，只是第一种有利于代码的复用。
selector1{

}
selector2{

} //第二种       
    

    

     
    

    • 



==================================================================


==================================================================、


=====================================未完待续....下一篇，各类选择器的优先级


 


本篇中只是大致叙述了一下，CSS选择器的种类，讲的也比较浅显---如果详细学习，推荐


http://www.css88.com/book/css/selectors/pseudo-classes/index.htm...


 


 






		

		
posted @ 
2015-04-30 17:20 
我爱搬砖 
阅读(978) 
评论(0) 
编辑 
收藏 
举报