CSS3选择器

CSS3中添加了很多选取html元素的新样式，我们都知道，通过选择器的方式选择元素比通过设置id和class更利于网页优化，接下来看看CSS3的选择器;

关系选择器：

　　例：p ~ span （兄弟选择）

属性选择器：

　　[ ] : span [date] { ... }  表示选中span中包含date这个属性的元素

　　[ val = ' x']：span[ val = " tar"] 表示选中 val = x的 所有元素   <span val = "x"></span>

　　[ val ~= 'span2'] 表示val中包含span2的元素

　　[val ^='s'] 表示选中val的值中以 s 开头的元素

　　[val $='n'] 表示val中以 n结尾的元素

　　[ val * = 'sp'] 表示匹配val值中有 sp 的元素

伪选择器：

　　: : before  例：   span : :before{ ... }  表示在sapn之后

　　: : after 例：   表示在其之前

　　: first-letter{ ... } 选中当前行的第一个字   可搭配浮动设置首字下沉的效果

 

 

 

 :first-line:选中当前这一行

  : :seletion{...}  设置选中时的样式 

  : :placehoder{...} 设置input中提示字的样式

 

p: : not(.li){...} 表示 p 中除了.li 以外的元素被选中时的状态

 

:root  根元素，相当于html，且后面的元素会继承根元素属性

 

:target  目标选择器，用来匹配文档的url的某个标志符的目标元素

　　例： <a href = "#target">Text</a>

　　　　　:target{ display:block}

:first-child:表示第一个子元素

:only-child:表示仅有

:last-child : 表示最后一个子元素

 

:nth - child(n) :  n 为数字算式

:nth - last - child(n)

 

:first - of - type: 表示其父元素的首个元素的每个当期元素

:last - of - type :表示其父元素的首个元素的每个末尾元素

:only - of - type:其父元素的唯一子元素的每个当前元素

:nth - of - type(n) 表示其父元素第n个元素的每个当前元素

:nth - last - of - type(n) 表示其父元素第n个元素的每个当前元素（从后往前算）

 

:empty  表示空节点  注释也算作空

:checked ：表示选中时的状态

: enabled ：表示可用或者不可用的状态

:disabled ：表示禁用状态

:read - only : 表示制度状态