30个最常用CSS选择器Word格式.docx

1、#号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10）， 作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择 器的地步？3. .X.error color: red;这是一个class（类）选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。4. X Yli a text-decoration: none;这也是我们最常用的一种选择器后代选择器。用于选取X元素下子元素Y，要留意

2、的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有 的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要 考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。5. Xa color: ul margin-left: 标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。6. X:visited和X:linka:link color:visted color: purple;使用:li

3、nk伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。IE7+、Firefox、Chrome、Safari、Opera7. X+Yul + p 相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。（只匹配第一个元素） 兼容浏览器：8. XY5678910111213141516div#container ul ulli List Item Child /ul List Item 子选择器。与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#containerul仅对container中最近一级的u

4、l起作用。从理论上来讲X Y是值得提倡选择器，可惜IE6不支持。9. X Yul p 相邻选择器，与前面提到的X+Y不同的是，XY匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。10. Xtitleatitle green;属性选择器。比如上述代码匹配的是带有title属性的链接元素。兼容浏览器：11. Xtitle=fooahref= #1f6053; 上面的代码匹配所有拥有href属性，且href为 的所有链接。这个功能很好，但是多少又有些局限。如果我们希望匹配href包含的所有链接该怎么做呢？看下一个选择器。12. Xtitle*=ahref*=正如我们想要的，上面代码匹配的是hre

5、f中包含”的所有链接。13. Xhref=httpahref=httpbackground: url（path/to/external/icon.png） no-repeat;padding-left: 10px;上面代码匹配的是href中所有以http开头的链接。13. Xhref$=.jpg在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）14. Xdata-*=foo在上一个选择器中提到如何匹配所有图片链接。如果使用Xhref$=.jpg实现

6、，需要这样做：ahref$=.jpg, .jpeg.png.gif看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性，例如data-filehtml代码a href=path/to/image.jpg data-filetype=image 图片链接 css代码如下：adata-filetype=这样所有链接到图片的链接字体颜色为红色。15. Xfoo=bar属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子： data-info=external image Click Me, Fool li:last-child none;与:first-c

7、hild类似，它匹配的是序列中的最后一个元素。28. X:only-childdiv p:only-child 这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。divp My paragraph here. Two paragraphs total. 在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。29. X:only-of-typeonly-of-type 这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。30. X:first-of-typefir

8、st-of-type伪类与:nth-of-type（1）效果相同，匹配出现的第一个元素。我们来看个例子： List Item 1 List Item 2 List Item 3 List Item 4 nth-child（2） 方案二：p + ul li:方案三：first-of-type li:nth-last-child（1） IE9+、Firefox、Chrome、Safari、Opera。总结：如果你正在使用老版本的浏览器，如IE 6，在使用上面css选择器时一定要注意它是否兼容。不过，这不应成为阻止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度。