浅谈CSS选择器

       CSS选择器可以说是CSS里的核心之一，CSS一般都要通过选择器对不同的元素进行控制，并赋予各种样式规则来实现各种效果。什么是选择器呢？

      每一条CSS样式定义由两部分组成，形式为“选择器{样式}”，在“{}”之前的部分就是“选择器”。 “选择器”指明了“{}”中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

      简单的说CSS选择器有通配选择器、标签选择器、类选择器以及ID选择器。通配选择器就是“*”，例如“*{color:red;}”，它可以匹配所有的元素，但它的级别最低。标签选择器的级别仅高于通配选择器，以HTML文档里的各种标签组成。类选择器是CSS里最灵活的一种选择器，他通过类名可以对HTML文档里设置了相同类名的元素进行批量控制，他以“.”加上类名组成，例如“.lleft {margin-left: 20px;}”。ID选择器也是CSS里非常重要的一类选择器，因为ID名在HTML文档中不能重复，只能对单个的元素进行控制，但它的级别是除了行内样式以及添加“！important”标记样式外级别最高的，他对页面里的某些关键的样式规则起着非常重要的作用，它由“#”加ID名组成，例如“#nav {padding:0;}”。这些选择器多数时候都会组合使用，因此就产生了其他的一些复杂的选择器。下面简单的说说部分复杂选择器：

       1、派生选择器。派生选择器也叫包含选择器，是由上述简单选择器通过添加空格来组成，例如“p .intro {color:red;}”，他会选择“p”标签元素里面包含有“intro”类的元素，注意他与“p.intro {color:red}”的区别，后者“p”与“intro”之间没有空格，它表示选择设置了“intro”类的“p”标签元素。

       2、子选择器。子选择器是通过简单选择器添加“>”来组成，例如“ul>li {list-style-type:none}”，选择了“ul”标签的子元素“li”标签元素。注意它与派生选择器的区别，派生选择器不一定是子元素与父元素之间，只要一个元素包含在另一个元素内即可以被选择，而子选择器只能在父元素与子元素之间才有效。子选择器与派生选择器都能多次使用，例如“body>h2>ul>li{padding:5px;}”与“#nav h2 a{font-weight:normal;}”。

       3、临近同胞选择器。它使用一个“+”把一个元素与下一个元素连接起来，例如，为了选择“h2”标签后的第一个段落，则可以用“h2+p {}”这样的选择器，只有在“h2”标签元素后的第一个“p”标签元素才会获得相应的样式规则，只有两者相邻才有效。

       4、属性选择器。属性选择器是简单选择器后用“[]”添加它所相关元素的某项属性，例如“.photo[title] {}”，选择了带有“title”属性的“photo”类元素。利用属性选择器，可以挑选带有特定属性的标签元素或类元素，它也可以单独使用，例如“[title]{}”。属性选择器也可以具体一点，可以附加上属性的属性值，可以选择那些不仅共享特定属性而且带有精确属性值的元素，例如“a[href="http://www.baidu.com"] {}”。

       5、伪类选择器。CSS伪类主要用于向某些选择器添加特殊的效果。一般用的比较多的是锚伪类，也就是超链接“a”标签元素的伪类，包括“a:link {}”、“a:visited”、”a:hover {}”与“a:active {}”，它们分别对未访问的、已访问的、鼠标指到的与选定点击时的超链接进行样式规则设置，”a:hover {}”还可以使用在其它元素上。还有其他的伪类选择器，像“:first-child {}、:after {}、:befor {}、:lang {}、:focus {}”等等，例如“p:first-child{color:red};”，这里的样式规则将使用在第一个“p”标签元素上，注意这里的“p”标签元素必须是其父元素了所有子元素里的第一个元素，否则无效。在CSS3中新增了更多的伪类选择器，像“:first-of-type {}、 :last-of-type {}、 :only-child {}”等等。

       当给一个元素设置样式规则时，这个样式规则规则会与默认规则竞争，但是由于它具有较高的层叠优先级，所以会覆盖默认规则。并且CSS支持给同一个元素多次设置相同的样式规则，一般元素会使用离它最近的规则，若有冲突，浏览器就要要使用层叠顺序来确定一组竞争规则中真正生效的样式规则。