CSS选择器
选择器的种类
基本的选择器有以下几种：
- 标签选择器：通过标记名称来筛选标记
p{color:red} - class选择器：通过标记的class属性值来筛选标记
.myclass{color:red} - id选择器：通过标记的id属性值来定位标记
#myid{color:red}
如果多个选择器的样式规则都是一样的，你可以这样写：
p, .myclass, #myid {color:red}
按下面的代码创建一个HTML和一个CSS，再将他们关联起来，看看会发生什么。
<body>
<h1 class="myclass">这是开心的一级标题</h1>
<p>这是一个有趣的段落</p>
<h2 id="myid">这是调皮的二级标题</h2>
</body>
p{color:red}
.myclass{color:blue}
#myid{color:green}
伪类选择器
使用伪类选择器可以定义标记在不同状态下的样式。
比如，与<a>标记相关的一系列伪类可用来控制链接的不同状态
<p><a href="#">这是一个带链接的例句。</a></p>
a:link{color:#ff0000} /*未访问的链接*/
a:visited{color:#00ff00} /*已访问的链接*/
a:hover{color:#ff00ff} /*当鼠标悬停在链接上*/
a:active{color:#0000ff} /*当鼠标按住链接不松手*/
:first-child, :last-child和:nth-child可以被用来定位一组同类兄弟元素中特定序列位置的元素。
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
li:first-child{color:blue} /*同一组li中的第一个*/
li:last-child{color:green} /*同一组li中的最后一个*/
li:nth-child(2n){color:red} /*同一组li中的第偶数个*/
派生选择器
所谓派生选择器，就是将几种选择器综合到一起使用，比如
选择所有具有class=“classname” 属性的P标记：
p.classname {...}
选择所有嵌套在具有id=“idname”属性标记内的标记
#idname p {...}
选择所有嵌套在 div标记内部的P标记
div p {...}
选择所有嵌套在 div标记内部的p标记，且p必须是div的直接子元素
div > p {...}
选择所有嵌套在class="class1"标记中的class="class2"标记
.class1 .class2 {...}
更多选择器的用法，请参考：
http://www.w3schools.com/cssref/css_selectors.asp
CSS继承与优先级
父级别标记的CSS样式有时会被子级别继承（如果该样式对子元素有意义的话），比如有这样一段HTML和CSS：
<p>一个段落中的<span>文字</span></p>
p{color:red}
上面整个行文本都会是红色，因为作为子元素的span继承了p的样式。
有时候，大量的CSS定义会互相冲突，那么到底浏览器会按照什么样的规则来渲染呢？考虑下面这个例子：
<p>一个段落中<span class="s">红色</span>的文本</p>
span{color:red}
.s{color:green}
优先级规则
“高级”选择器定义的样式规则会覆盖“低级”选择器定义的样式规则，优先级由低到高排列如下：
- 标签选择器
- 派生的标签选择器
- 类选择器
- 派生的类选择器
- ID选择器
- 元素内定义的样式
这么复杂？这怎么知道哪个样式规则会覆盖（或被覆盖）？找Chrome帮忙吧！
选择器练习
将下列HTML代码定义成上图所示样式，不得改变HTML结构，应该怎样写CSS？
<p>这是一个<span>红色</span>的例句。</p>
<p class="p">这是一个<span>绿色</span>的例句。</p>
<p class="p">这是一个<span class="s">紫色</span>的例句。</p>
<p id="p4">这是一个<span>粉色</span>的例句。</p>