2素材源码参赛作品selector

*{

margin:0;

padding:0;

}星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。#container*{

border:1pxsolidblack;

}上面的代码中会应用于id为container元素的所有子元素中。除非必要，不建议在页面中过多的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera通用选择器标签选择器标签(html)选择器：整体控制a{color:red;}

ul{margin-left:0;}使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*（通用选择器）高。标签选择器与网页元素同名兼容浏览器：IE6+、Firefox、Chrome、Safari、Operaeg:lable.html类选择器类选择器：精确控制.error{

color:red;

}这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。类选择器命名规则：·所有类选择器的名称必须以一个圆点开头。·css只允许在类名称中使用字母、数字、连字号（-）和下划线（_）。·在圆点之后，名称始终必须以字母开头。·类名称区分大小写兼容浏览器：IE6+、Firefox、Chrome、Safari、Operaeg：class.htmlid选择器id选择器设定特殊元素的样式#container{

width:960px;

margin:auto;

}井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？用类选择器还是用ID选择器，应遵循以下规则。•要在一张网页上多次使用某一种样式时，必须使用类选择器。•用ID选择器来识别每张网页上只出现一次的部分。•考虑用ID选择器来避免样式冲突，因为Web浏览器给了ID选择器高于类选择器的优先权。兼容浏览器：IE6+、Firefox、Chrome、Safari、Operaeg:id.html属性选择器属性选择器(Attributeselector)让我们可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素——这就是属性选择器展示它们的威力的地方。有6个不同类型的属性选择器：

[att=value]该属性有指定的确切的值。

[att~=value]该属性的值必须是一系列用空格隔开的多个值，(比如，class=”titlefeaturedhome”)，而且这些值中的一个必须是指定的值”value”。

[att|=value]属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)

[att^=value]该属性的值以指定值开始。

[att$=value]该属性的值包含指定的值(而无论其位置)。

[att*=value]该属性的值以指定的值结束。属性选择器属性选择器的另一个很有用的用处是定位不同类型的input元素。我们来看一个例子，如果你想让文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：input[type="text"]{width:200px;}它将匹配所有type属性值等于“text”的input元素。属性选择器属性选择器又比如，我们想为网站上不同的文件类型的链接添加不同的图标，这样访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现：a[href*=".jpg"]{background:url(jpeg.gif)no-repeatleft50%;padding:2px02px20px;}a[href*=".pdf"]{background:url(pdf.gif)no-repeatleft50%;padding:2px02px20px;}a[href*=".doc"]{background:url(word.gif)no-repeatleft50%;padding:2px02px20px;}在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。伪选择器.复合选择器相邻选择器子选择器派生选择器html族谱htmlbodyheadph1titlestrongHTML由嵌套标签组成：甚至又在更多的标签里面。这些标签之间的关系（及它们之间如何相互嵌套）就形成了一个族谱。祖先标签派生标签父标签子标签同胞标签派生选择器派生（后代）选择器XY{}lia{

text-decoration:none;

}用于选取X元素下子元素Y。注意：这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。兼容浏览器：IE6+、Firefox、Chrome、Safari、Operaeg:derivedselector子选择器X>Y#container>ul{

border:1pxsolidblack;

}<divid="container">

<ul>

<li>ListItem

<ul><li>Child</li>

</ul>

</li>

<li>ListItem</li>

<li>ListItem</li>

<li>ListItem</li>

</ul>

</div>与后代选择器XY不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X>Y是值得提倡选择器。兼容浏览器：IE7+、Firefox、Chrome、Safari、OperaX+Yul+p{

color:red;

}

相邻同胞选择器

上述代码中会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。（只匹配第一个元素）兼容浏览器：IE7+、