css中一些常用选择器的介绍

1.元素选择器

这是最基本的css选择器，html文档本身的元素就是一个选择器。

body{font-family:"Microsoft Yahei";text-align:center;background-color: #eff0f0}

2.关系选择器

A B：后代选择器，此选择器作用于Ａ后代中所有的B元素。

ul li {margin-bottom:0.5em;}

A>B:子选择器，此选择器作用于Ａ后代中所有的B元素，他将忽略任何进一步的嵌套。

ul > li {list-style:none;} //仅限ul的直接子元素li，如果li里面还嵌套着另一个 ul 结构时，最里面的 li 将被忽略

A+B：相邻兄弟选择器，此选择器作用于与A元素具有相同父元素且在标记中紧邻A的B元素。

li + li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一个li之外的所有li

A~B:一般兄弟选择器，此选择器作用于与A元素具有相同父元素且在标记中位于A元素之后的元素。

h1 ~ p {color:#f00;} //定位具有相同父元素的，h1标签之后的所有p标签

3.派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，可以使标记更加简洁。

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {

font-style: italic;

font-weight: normal;

}

4.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 选择器以 “#” 来定义。

#red {color:red;}

#green {color:green;}

id 选择器和派生选择器

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

#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。

5.类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

和 id 一样，class 也可被用作派生选择器：

.fancy td {

color: #f60;

background: #666;

}

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

6.伪类选择器

:link：未访问的链接；

:visited：已访问的链接，不建议使用；

:hover：鼠标移动到容器，不仅限于链接，可用于页面中的任何元素；

:active：被激活时的状态，不仅限于链接，可用于任何具有tabindex属性的元素；

:focus：获得焦点时状态，不仅限于链接，可用于任何具有tabindex属性的无线：

input:focus {border:1px solid #333;} //输入框获得焦点时的样式

:enabled：已启用的界面元素：

input:enabled {border:1px solid #899;}

:disabled：已禁用的界面元素：

input:disabled {background:#eee;}

以上是css中一些基本的常用选择器，熟练搭配使用这些选择器，可以很方便的让你代码更加简洁！

ps:以上参考资料 http://www.uisdc.com/css-selector；w3cshcool；

ps+：第一次写博客，心里还有点小激动呢，哈哈哈！