1、CSS选择器的使用,CSS选择器,基本选择器,复合选择器,css基本选择器,1.通用选择器,2.标签选择器,3.类选择器,4.id选择器,5.属性选择器,* margin: 0; padding: 0; 星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。 #container * border: 1px solid black; 上面的代码中会应用于id为container元素的所有子元素中。 除非必要，不建议在页面中过多的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。兼容浏览器：IE6
2、+、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选择器能作用于期望样式化的一组元素。类选择器命名规则：所有类选择器
3、的名称必须以一个圆点开头。css只允许在类名称中使用字母、数字、连字号（-）和下划线（_）。在圆点之后，名称始终必须以字母开头。类名称区分大小写 兼容浏览器：IE6+、Firefox、Chrome、Safari、Operaeg：class.html,id选择器,id选择器 设定特殊元素的样式#container width: 960px; margin: auto; 井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以
4、在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？ 用类选择器还是用ID选择器，应遵循以下规则。 要在一张网页上多次使用某一种样式时，必须使用类选择器。 用ID选择器来识别每张网页上只出现一次的部分。 考虑用ID选择器来避免样式冲突，因为Web浏览器给了ID选择器高于类选择器的优先权。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Operaeg:id.html,属性选择器,属性选择器(Attribute selector)让我们可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性而不管它的值的这个元素都将被定位，也可以更加明确并定
5、位在这些属性上使用特定值的元素 这就是属性选择器展示它们的威力的地方。,有6个不同类型的属性选择器：att =value该属性有指定的确切的值。att=value该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。att|=value属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)att=value该属性的值以指定值开始。att$=value该属性的值包含指定的值(而无论其位置)。att*=value该属性的
6、值以指定的值结束。,属性选择器,属性选择器的另一个很有用的用处是定位不同类型的input元素。我们来看一个例子，如果你想让文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：inputtype=“text“ width: 200px; 它将匹配所有type属性值等于“text”的input元素。,属性选择器,属性选择器,又比如，我们想为网站上不同的文件类型的链接添加不同的图标，这样访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现： ahref*=“.jpg“ background: url(jpeg.gif) no-repeat le
7、ft 50%;padding: 2px 0 2px 20px; ahref*=“.pdf“ background: url(pdf.gif) no-repeat left 50%;padding: 2px 0 2px 20px; ahref*=“.doc“ background: url(word.gif) no-repeat left 50%;padding: 2px 0 2px 20px; 在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。,复合选择器,html族谱,html,body,head,p,h1,title,str
8、ong,HTML由嵌套标签组成：甚至又在更多的标签里面。这些标签之间的关系（及它们之间如何相互嵌套）就形成了一个族谱。祖先标签 派生标签 父标签 子标签 同胞标签,派生选择器,派生（后代）选择器 X Y li a text-decoration: none; 用于选取X元素下子元素Y。 注意：这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。 兼容浏览器：IE6+、Firefox、Chrome、Safari、O
9、peraeg:derived selector,子选择器,X Y #container ul border: 1px solid black; List Item Child List Item List Item List Item 与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#containerul仅对container中最近一级的ul起作用。从理论上来讲X Y是值得提倡选择器。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera,X+Y ul + p color: red; 相邻同胞选择器上述代码中会匹配在
10、ul后面的第一个p，将段落内的文字颜色设置为红色。（只匹配第一个元素）兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera,相邻同胞选择器,XY ul p color: red; 相邻选择器，与前面提到的X+Y不同的是，XY匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera,相邻选择器,伪类和伪元素,之所以被称为动态伪类是因为它们并不存在于HTML中 而是只有当用户和网站交互的时候才会呈现。有两类动态伪类：链接 和用户行为。链接 :link 和:visited，用户行为包括:hover、:ac
11、tive 和:focus。:link伪类用于链接尚未被用户访问的时候，而:visited 伪类用用户访问过的链接，也就是说它们是相反的。:hover伪类用于用户移动他们的鼠标在元素上，而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后，:focus伪类用于元素成为焦点的时候最常用于表单元素。,你可以在样式表中使用多种用户行为动态伪类，这样就可以，比如，根据用户的鼠标只是滑过或悬停的时候，为一个输入框定义不同的背景色: input:focus background: #D2D2D2;border: 1px solid #5E5E5E; input:focus:hover
12、background: #C7C7C7;兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera对于IE系列浏览器来说，IE6只允许:hover 伪类应用于链接元素(a标签)而且只有IE8接受:active状态。,伪类和伪元素,伪类和伪元素,:first-child :first-child伪类允许你定位某个元素第一个子元素。比如，如果你想给你的无须列表的第一个li添加一个margin-top，你就可以这样写： ul li:first-child margin-top: 10px;兼容浏览器：IE8+、Firefox、Chrome、Safari、Opera,:nth-chi
13、ld(n)li:nth-child(3) color: red; 这个伪类用于设定一个序列元素（比如li、tr）中的第n个元素（从1开始算起）的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色： tr:nth-child(2n) background-color: gray; 兼容浏览器：IE9+、Firefox、Chrome、Safari,伪类和伪元素,伪类和伪元素,:nth-last-child(n)li:nth-last-child(2) color: red; 与:nth-child(n)功能类似
14、，不同的是它从一个序列的最后一个元素开始算起。 上面例子中设定倒数第二个列表元素的字体颜色。兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera,伪类和伪元素,:nth-of-type(n)ul:nth-of-type(3) border: 1px solid black; 与:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。兼容浏览器：IE9+、Firefox、Chrome、Safari,伪类和伪元素,:nth-of-type(n):nth-last-of-type(n):last-child:only-child:only-of-type:first-of-type,谢谢观赏,
