关注前端开发
关注用户体验

还需要学习的十二种CSS选择器

在前面的文章中,我们在大前端介绍了《五种必须知道的CSS选择器》,现在向大家介绍,还需要学习的另外十二种CSS选择器。如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习。

一、X:link X:visited X:hover X:active 伪类

a:link { color: red; }
a:visted { color: purple; }

伪类选择器,visted已被访问过的样式,hover鼠标经过的样式,link未被访问的样式。三种伪类选择器常用于链接,但不是说只适用于链接,可惜的是IE6只支持将这三种伪类选择器作用于链接。

这里明河说明一点,由于CSS优先级的关系(后面比前面的优先级高),这几个伪类的书写顺序,一般是link、visted、hover、active。

二、X + Y 相邻选择器

ul + p {
color: red;
}

相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配一个元素)

三、X > Y 子选择器

子选择器,留意X > Y与X Y的区别,后者是子孙选择器,即无视层级,而X > Y是字选择器,只匹配X下的子元素Y。
从理论上来讲X > Y是值得提倡选择器,可惜IE6不支持。

四、X ~ Y 相邻选择器

ul ~ p {
color: red;
}

相邻选择器,与X+Y类似,不同的是X ~ Y匹配的是元素集合,比如上述代码,匹配的是所有ul相邻的p

五、X[title] 属性选择器

a[title] {
color: green;
}

属性选择器,比如上述代码匹配的是带有title属性的链接元素。

六、X[title=””] 另一种属性选择器

a[title=”大前端”]{
color:#096;
}

属性选择器,上述代码不只匹配带有title属性,更匹配title属性等于”大前端”的链接元素。[]内不只可用title属性,还可以使用其他属性。

七、X[title*=””] 模糊匹配属性选择器

a[title*=”大前端”]{
color:#096;
}

加了*号,意味着是模糊匹配,比如上述代码,会匹配title属性为明或明河或明河共影等带有明字的链接属性。

八、X[title^=””] 另一种模糊匹配属性选择器

a[title^=”大前端”]{
color:#096;
}

模糊匹配,与*的作用相反,^起到排除的作用,比如上述代码,会匹配title属性不带有明字的链接属性。

九、X[href$=””] 很实用的属性选择器

a[href$=”.png”] {
color: red;
}

在属性选择器中多一个$符号,用于匹配结尾为特定字符串的元素,比如上述代码匹配的就是href属性值的结尾为.png的链接。

十、X[data-*=””] 不太常用的属性选择器

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

data-filetype这个属性目前用的实在不多,但有些场合非常好用。比如我要匹配所有的数据类型为图片的链接,如果使用X[href$=””]的方式如下:

a[href$=”.jpg”],
a[href$=”.jpeg”],
a[href$=”.png”],
a[href$=”.gif”] {
color: red;
}

而使用data-filetype,只要:

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

当然前提是你给每一个链接加上data-filetype属性。

十一、X[foo~=””] 非常少用的选择器

a[data-info~=”external”] {
color: red;
}
a[data-info~=”image”] {
border: 1px solid black;
}

这也是非常少用的选择器,加上~号,有一种情况特别适用,比如你有个data-filetype=”external image”属性,这时候我希望分别针对external和image样式控制。

a[data-info~=”external”] {
color: red;
}
a[data-info~=”image”] {
border: 1px solid black;
}

上述代码会匹配data-filetype=”external”、data-filetype=”image”、data-filetype=”external image”的a。

十二、X:checked 另一种伪类选择器

input[type=radio]:checked {
border: 1px solid black;
}

这个伪类选择器只用于匹配带有checked属性的元素,比如radio、checkbox即单选框和多选框。目前这个伪类选择器,IE9下都不支持,非IE浏览器基本上都支持。

在后面大前端文章中,我们还将继续介绍CSS选择器,我们一起期待。

赞(0)
未经允许不得转载:大前端 » 还需要学习的十二种CSS选择器
分享到: 更多 (0)

评论 10

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #10

    The post is really a helpful interesting and well-written details. The a lot more Someone said the more I want to study. Any article writer that makes the time and effort to publish participating articles similar to this needs to be commended.

    Marvin Endecott2周前 (05-16)回复
  2. #9

    An impressive share, I simply given this onto a colleague who has been performing a little analysis with this. And the man actually bought me breakfast because I uncovered it for him.. smile. So let me reword that: Thnx to the treat! But yeah Thnkx for spending some time go over this, I’m strongly about it and really like reading on this topic. Whenever possible, as you become expertise, might you mind updating your blog post with additional details? It can be extremely helpful for me. Massive thumb up just for this post!

    Nonton Anime2周前 (05-11)回复
  3. #8

    You are my breathing in, I possess few blogs and sometimes run out from brand .

    cat products3周前 (05-09)回复
  4. #7

    Subsequently, after spending many hours on the internet at last We’ve uncovered an individual that definitely does know what they are discussing many thanks a great deal wonderful post

    Sammie Powel2个月前 (04-09)回复
  5. #6

    It’s hard to find knowledgeable people for this topic, however, you seem like you know what you’re talking about! Thanks

    Apex Legends2个月前 (03-31)回复
  6. #5

    I really like your wordpress design, wherever would you down load it from?

    my singing monsters2个月前 (03-28)回复
  7. #4

    Outstanding post, you have pointed out some wonderful details , I also conceive this s a very good website.

    Keneth Bedatsky3个月前 (03-11)回复
  8. #3

    第七条,“属性为明或明河或明河共影等带有明字的链接属性”……

    孙老四9年前 (2010-12-23)回复
  9. #2

    @Jankerli:现在能用啊,只不过不能用在网上,可恶的IE不支持的太多,用chrome测试下还是不错的

    浩子9年前 (2010-12-10)回复
  10. #1

    先来了解下,我都还没用过后面的这些呢,不知道什么时候有机会用···呵呵···

    Jankerli9年前 (2010-12-08)回复

themebetter 国内更好的WordPress主题服务商

立即前往