CSS各种选择器

一、选择器

1、元素选择器

li{}最常用、最基本

2、派生选择器

li strong { } 标签间用空格分隔、定义了li标签中的strong标签的样式，css1中上下文选择器、css2中派生选择器

3、id选择器 

#id{} 在现代布局中，id 选择器常常用于建立派生选择器。#id div{}

4、class选择器

.classname{} 可以结合元素选择器

多类选择器

class=“classname1 classname2  classname3...”空格来分隔  在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器

5、后代选择器

<ul>

　　<li></li>

　　<li><em></em></li>

　　<li></li>

　　<li></li>

</ul>

ul em{}无论em元素嵌套多深，都可以选择到

6、子元素选择器

如果不希望选择任意的后代元素，h1>strong{}选择h1中的所有子元素strong

7、相邻兄弟选择器

选择紧接在另一个元素后的元素，而且二者有相同的父元素  h1 + p

8、伪类

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */

a:active{color: #0000FF}/* 被选择的链接 */

 

input:focus{}//IE 浏览器不支持此属性。若声明了doctype则IE8及以上可以支持

//为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！

//为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！

//所有主流浏览器都支持 :active 伪类。激活的意思

 

9、伪元素

http://www.w3school.com.cn/css/css_pseudo_elements.asp