CSS3选择器总结

CSS3选择器小结

?? 这段时间忙中偷闲学了下CSS3，在此想给自己的学习小小地总结下，首先还是总结下CSS3的选择器吧。
?

??CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的class、 ID或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

???1、属性选择器：

?

??????①[att=val]：其中att代表属性，val代表属性值(例如：div[id=section1]),这在CSS2中就有了，没什么稀奇的，接下来三个属性选择器是CSS3中新增加的，请往下看；
??????②[att*=val]：匹配包含含有特定的值的属性的元素的属性的元素；


?
??????③[att^=val]：匹配包含以特定的值开头的属性的元素；


?
??????④[att$=val]：匹配包含以特定的值结尾的属性的元素；

?
???另外注意：若遇到一些符号时要在符号前加上转义字符“\”，如[id=section\-header]{background:red;}

浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。
???2、伪元素选择器：
??????①first-line：


?
??????②first-letter：


?
??????③before：


?
??????④after：


?
???3、结构性伪类选择器：
????（1）四个基本的结构选择器root、not、empty和target：


?
????（2）选择器first-child、last-child、nth-child和nth-last-child：


?
????（3）选择器nth-of-type和nth-last-of-type：
????????在这里有个问题：nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。
使用它们替换：

?
????（4）选择器only-child和only-of-type：
??????①only-child：
??????②only-of-type：

?
????（5）循环使用样式：
??????nth-child、nth-last-child、nth-of-type和nth-last-of-type选择器可以用来循环使用样式


?
浏览器支持:?

Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox3.5+支持伪类。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。

???4、UI元素状态伪类选择器：
??????在CSS3的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。这些选择器的共同特征是：指定的样式只用当元素处于某种状态下才气作用，在默认的状态下不起作用。 。
??????在CSS3中，共有11种UI元素状态伪类选择器，分别是：


?
?????逐个说明：
?????(1)E:hover选择器用来指定当鼠标指针移动到元素上面时，元素所使用的样式。
?????(2)E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开时）时使用的的样式。
?????(3)E:focus选择器用来指定当元素获得焦点时使用的样式。主要是文本框控件获得焦点病进行文字输入时使用。
?????(4)E:enabled选择器用来指定当前元素处于可用状态时的样式
?????(5)E:disabled选择器用来指定当前元素处于不可用状态时的样式
?????(6)E:read-only选择器用来指定当元素处于只读状态时的样式，在ff下需要写成-moz-read-only的形式
?????(7)E:read-write选择器用来指定当元素处于非只读状态时的样式。在ff下需要写成-moz-read-write的形式
?????(8)E:checked选择器用来指定当表单中的radio单选按钮或checkbox复选框处于选取状态的时的样式。在ff下需要写成-moz-checked的形式
?????(9)E:default选择器用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。需要注意的是，即使用户将默认设定为选取状态的单选按钮或者复选框修改为非选取状态，使用E:default选择器设定的样式依然有效。
?????(10)E:indeterminate选择器用来指定当页面打开时，如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。如果用户选中这组中的任何一个单选按钮，那么整组的单选按钮的样式被取消。
?????(11)E::selection选择器用来指定当元素处于选中状态时的样式。这里需要注意的是:在ff下使用时，需要写成-moz-selection的形式。
??? 5、通用兄弟元素选择器：

??????CSS3中唯一新引入的连字符是通用兄弟元素选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。说白了，就是同级的元素设置同样的样式。例如：

浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6！

?

到此为止！

查看更多 下一篇