css之选择器

标签：

我们都用过jquery，使用jquery选择器，非常的简单，最近刚好有项目上手，拿起书本看了一下，发现好多的东西都忘掉了，好记性不如烂笔头，就将这章内容记录下来，现在我们看下css原生的选择器。

选择器规则结构

每个规则都有两个基本部分:选择器(selector)和申明块(declaration block)。申明块由一个或者多个申明组成，每个申明是一个属性值对(property-value).每个css样式表由一个或多个规则组成。如下图所示

元素选择器

元素选择器是最常见的选择器，往往是一些html与元素，当然也并不是只有html才能作为元素选择器，例如如果css文件包含xml文档的样式，那么xml的元素也可以作为元素选择器。我们常用的html选择器元素有 p h1 h2等，下面的p标签的元素的背景颜色将变为其指定的颜色

p { background-color:#06F}

分组选择器

如果想要为多个元素设置同一个样式类型该怎么弄,我们可以用到分组选择器,及将多个元素用逗号分开即可,如下面的p标签和h1标签将使用同一个背景颜色

p ,h1{ background-color:#06F}

通配选择器

css2引入了一种新的简单的选择器，称为通配选择器(universal selector)，显示为一个*号，这个符号可以与任意一个元素匹配，例如要使html每一个元素都变为红色可以使用如下语法

*{ background-color:red}

ID选择器

除了指示文档元素的选择器外，还有另外的两种类型的选择器：id选择器和类选择器，这节主要介绍id选择器，它允许存在一种独立于文档元素的方式来指定样式。，这些选择器可以单独使用也可以结合其他元素选择器来使用。定义id选择器时，前面加上#号，在加上具体的id，这个id必须唯一。先定义id选择器，然后在标签元素中使用 id属性引用定义的id

#test{ background-color:red; width:400px; height:400px;}

<div id="test"></div>

类选择器

和id选择器类似，不同的是我们不需要再定义的类前面加#号，而是需要换为.号，需要使用的时候，在标签中使用class属性类引用构造的类。

.test{ background-color:red; width:400px; height:400px;}

<div class="test"="test"></div>

多类选择器

前面我们看到的是单类选择器，即一般只有一个类，在html中，一个class值有可能包含一个值列表，各个值用空格分开，即我们的元素的class属性可以是多个的类，元素会显示为多个类定义的样式结果。

.test{ background-color:red; width:400px; height:400px;}
.fontstyle{ font-size:24px}

<div class="test fontstyle"="test">adfsfd</div>

当然我们也可以这样定义多类

.test.fontstyle{ background-color:red; width:400px; height:400px;font-size:24px}

如果我们希望只看到 包含 test类和fontstyle类的 div元素 显示其定义的背景，我们可以这么定义，下面定义的样式可以理解为 所有包含 类test、fontstyle类的div元素 将会使用定义的样式，其他的元素不会使用此效果

div.test.fontstyle{ background-color:red; width:400px; height:400px;font-size:24px}

css之选择器

标签：

原文地址：http://www.cnblogs.com/liuyuqing/p/4584060.html