CSS中的选择器

                                                                                       CSS中的选择器

     CSS中有多种选择器，它们的作用是选择出需要应用相应规则的元素的集合即确定CSS选择文档中要应用的样式的部分，那么，CSS中有哪几种选择器呢？

     我们可以将选择器大致分为两类：一、基本选择器；二、复合选择器。

     一、基本选择器

            1）、标签选择器/元素选择器：这一类选择器覆盖范围为相应的HTML标签，形如：p{....}、div{.......}。

            2）、ID选择器：这类选择器覆盖范围为应用了该ID的元素，形如：#first{......}、#typeFace{.....}。

            3）、类选择器：这类选择器覆盖范围为应用了该类别的元素集合，形如：.first{......}，其中，类选择器还包括多类选择器，即通过把两个类选择器链接到一起，仅可以选择同时包含这些类名的元素（类名的顺序不限），形如：p.warning.urgent{......}。

            4)、伪类选择器或者伪元素选择器：形如：伪类选择器--a:link{......}、a:hover{......}；伪元素选择器--clearFix:after{......}。伪类分为静态伪类（:link、:visited、:first-child）和动态伪类（:focus、:hover、:active）；CSS2.1中定义了4个伪元素：设置首字母样式:first-letter，设置第一行样式:first-line，设置之前:before和设置之后:after。

            5）、属性选择器：根据元素是否有某个或者某几个属性、元素属性值是否匹配来选择文档中要应用该样式的元素，形如：h1[class]{....}、a[herf] [title] {....}、h1[class="first"]{.....}、p[class="first warning"]。此外还有子串匹配属性选择器和特定属性选择器，用得较少，不再举例。

     二、复合选择器

            1）、“交集”选择器：覆盖满足所有条件的元素集合，形如：div.first{.....}、p.#like{......}。

            2）、“并集”选择器：覆盖一下所有元素集合，可以使多种选择器的集合，使用逗号连接，旨在为多个选择器一起设定规则。形如：div,p.like,div#first{.......}.。

            3）、后代选择器：覆盖满足祖先路径的后代元素的集合，用空格连接祖先和后代元素，形如：div p.clear h2{....}。

      三、此外还有2中用得较少的选择器

            1）、选择器子元素的选择器，形如：h1 > strong，该选择器选择只作为一个h1元素的直接子元素（而不是后代元素）的strong元素。

            2）、选择相邻兄弟元素的选择器，形如：h1 + p，该选择器选择紧接在一个h1元素后出现的所有段落，并且h1与p要有共同的父元素。

      以上选择器中，特别的要说一下伪类和伪元素选择器。与其他几种选择器不同，二者会根据其他条件而不是文档结构向文档中的某些部分应用样式。

      PS:以上内容讨论了CSS以何种方式选择文档中要应用样式的部分，即选择器，与之联系紧密的另一个问题则是文档中的元素如何选择自身将应用的样式？即样式/规则的优先级问题。

            行内样式>内部样式表中的id选择器中的规则>内部样式表中的class选择器规则>内部样式表中的标签选择器规则>外部样式表id规则>外部样式表class选择器规则>外部样式表标签选择器规则>导入样式表ID选择器规则>导入样式表class选择器规则>导入样式表标签选择器规则。