css selector简介

一.Tag selector
标签selecor ,也可以称为类型selector，它将对HTML页面中所有的该类型有效。

h1 {
   font-family:Arial, sans-serif;
   color:#CCCCFF;
}

表示所有h1标签都适用该CSS的rule，当然为了缩短代码，适用相同的rule的多个HTML Tag可以用逗号分隔开进行统一的修饰。如

DIV,H1 {

}

二.Class Selector
类选择器和HTML中的class相结合，应用到所有声明了该class的标签中。类选择器必须要以 “.”来开头。
对于

.title{
   color:#FF000;
   font-size:24px;
}

class selector可以分成独立和相关两种方式，独立的class selector是直接以.开头的，表示所有具有属性class的节点都是该CSS规则修饰的目标；相关的class selector常常跟Tag selector一起来修饰，表示指定的Tag 节点里面且具有对应的class的节点才是该CSS规则修饰的目标，如DIV.testClass {}

三.ID selector
ID选择器会将其syle应用在HTML中该ID的tag上。
对于

 #sidebar{
  float:left;
  margin-left:30px;
}

一个有意思的问题是如果在一个HTML中，有两个以上的tag用了同一个ID会怎么样呢？虽然并不是合法的HTML，但是大部分的游览器会忽略这个问题。这个时候ID选择器就像类选择器一样，只要哪个tag的使用了该ID，就会应用该style.
四.Descendent selector

这种选择器的的意思就是根据DOM树的祖先、父子关系来选择具体的元素。

如:

h1 strong {
     color:red;
}

将对<h1> This is homepage of <strong>liwenbing</strong></h1>中的strong的内容进行标红。

同样这种方式是可以组合前面的任何三种选择器：

h1 .intro a{
      color:yellow;
}

将对<h1> This is homepage of <strong >liwenbing </strong> who is <span class=”intro”><a href=”#”>lovely boy</a></span></h1>中的lovely boy标黄。

注意tag和类之间是否有空格是非常重要的。

有空格表示是应用该类的元素在tag之中，就像上面的例子；没有空格，则表示tag和class都标明的是同一个元素。

h1.intro a{   //注意h1和.intro之间没有空格
     color:blue;
}

对<h1 class=”intro”>This is homepage of <a href=”#” >liwenbing </a></h1>中的liwenbing是有效的。

再举一个和ID selector结合的例子：

#sidebar h2{
      font-size:1.2em;
}

上述style将对sidebar元素下面的所有h2进行应用。

五.Group selector

组选择器顾名思义就是对于一组selector应用同一中style，以逗号”,”隔开；组中的元素都可以是前面四中的任何一种。

h1,
p .intro,
#sidebar .title{
 color:#6F6F6F;
}

六.伪选择
伪选择器可以进一步地定义用户和页面的行为。最常用的就是对link的定义了；

a:hover{
  text-decoration:  none;
}
a:visited{
 color:blue;
}

当然关于link的除了上述两种，还有a:link,a:active;
其他还有很多的伪选择，例如现在在用的focus.下面这个CSS可以让input 有safari中的高亮效果（不过IE并不支持)。

 input:focus{
  border-color: #feca70;
}

其他伪选择器还有:before,:after,:firs-child.

 

 

Overview of CSS 2.1 selector syntax

Selector type	Pattern	Description
Universal	*	Matches any element.
Type	E	Matches any E element.
Class	.info	Matches any element whose class attribute contains the value info.
ID	#footer	Matches any element with an id equal to footer.
Descendant	E F	Matches any F element that is a descendant of an E element.
Child	E > F	Matches any F element that is a child of an E element.
Adjacent	E + F	Matches any F element immediately preceded by a sibling element E. （E元素和F元素同属于一个parent并且E元素在F元素之前）
Attribute	E[att]	Matches any E element that has an att attribute, regardless of its value.
Attribute	E[att=val]	Matches any E element whose att attribute value is exactly equal to val.
Attribute	E[att~=val]	Matches any E element whose att attribute value is a list of space-separated values, one of which is exactly equal to val.
Attribute	E[att|=val]	Matches any E element whose att attribute has a hyphen-separated list of values beginning with val.
The :first-child pseudo-class	E:first-child	Matches element E when E is the first child of its parent.
The link pseudo-classes	E:link E:visited	Matches not yet visited (:link) or already visited (:visited) links.
The dynamic pseudo-classes	E:active E:hover E:focus	Matches E during certain user actions.
The :language pseudo-class	E:lang(c)	Matches elements of type E that are in language c.
The :first-line pseudo-element	E:first-line	Matches the contents of the first formatted line of element E.
The :first-letter pseudo-element	E:first-letter	Matches the first letter of element E.
The :before and :after pseudo-elements	E:before E:after	Used to insert generated content before or after an element’s content.