首页 > html5+css > css基础知识 > 常见css选择器
2016
12-16

常见css选择器

1. *  选择页面每个元素。建议不使用,它给浏览器带来太多的负担。

* {margin: 0; padding: 0;}

通配选择器也可以用到子选择器上。

#container * {border: 1px solid black;}

2. #X  ID选择器。使用之前也需要谨慎,因为id选择器不能重复使用。不过id选择器的渲染速度是最快的。

#container {width: 960px; margin: auto;}

3. .X  类选择器。ID选择器与类选择器的差别是,后者可以用于多个元素。

.error {color: red;}

4. X Y  后代选择器。它作用处于X元素内的所有的y元素。后代选择器的渲染速率不快,特别是在有很长的前缀元素时。

li a{text-decoration: none;}

5. X  类型选择器。选择页面中同一类型的标签。

a {color: red; }

6. :  伪类选择器。

a:hover {color:red;}

7. X+Y  相信选择器。只作用于同一父级元素下的第一个元素。例子中只有紧邻ul中的第一个p的字体会是红色的。

ul+p {color: red;}

8. X>Y  X Y和X>Y不同的地方后者只选择X的第一级子元素。

p>ul{border: 1px solid black;}

9. X~Y  这个相邻选择器与X+Y相似,不同的是,ul+p只选择与ul相邻的第一个p,而X~Y匹配任何在ul元素之后的同级p元素。

ul~p {color: red;}

10. X[Title]  一种属性选择器。上例中,只选择带有title属性的链接标签。

a[title]{color:green;}

11. X[alt="aaa"]  上例中样式只会作用于alt属性为"aaa"的img标签。其他没有alt="aaa"属性的img标签不会变成块元素。

img[alt="aaa"]{display:block;}

12. X[Href*="Nettuts"]  属性后面加上星号(通配符)使网址出现nettuts的所有链接都变成绿色。

a[href*="tuts"] {color:#1f6053;}

13. X[href^="http"]  用这个方法在某些链接上加一些标识说明这些链接到其他网站。它用于表达式中显示字符串的开始。如果我们想选择那样带有http的a标签链接,我们可以使用类似上面的CSS。

a[href^="http"] {padding-left: 10px;}

14. X[Href$=".Jpg"]  $,查找字符串的尾部。这个例子中,我们查找所有以.jpg结尾的链接。

a[href$=".jpg"]{color: red;}

15. X[Data-*="Foo"]

要找到不同的图片格式:png,jpeg,jpg,gif等,我们可以使用多重选择器,比如:

<a href="/to/image.jpg" data-filetype="image">link</a>

在适当的地方加上钩(data-filetype="image")后,我们就可以使用一个标准的属性选择器选择这些标签。

a[data-filetype="image"] {color: red;}

16. X[Foo~="Bar"]

~符号允许我们选择带有空白间隔属性值的某一属性值标签。举例来说,我们给外链做些记号。

"<a href="/to/image.jpg" data-info="external image">link</a>

在适当地方使用标记,然后就可以选择任何带有这些属性的标签。

a[data-info~="image"] {border: 1px solid black;}

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。