在前面的文章中,我们在大前端介绍了《五种必须知道的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选择器,我们一起期待。
分享到:
相关推荐
jQuery 遍历css选择器 学习
路恩CSS学习助手,可快速查找css1、css2、css3...对CSS语法规则和CSS选择器也做了详细介绍;并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件,是前端CSS新手学习CSS样式的理想辅助工具。
CSS3选择器学习笔记代码
CSS基本选择器实用PPT学习教案.pptx
学习使用css选择器的爬虫工程文件,内容齐全,可直接使用,与博客文章同步分享。
css入门学习笔记1 基础选择器
文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器类选择器选择器分组(并集选择器)通配选择器复合选择器(交集选择器)后代元素选择器子元素选择器伪类...
CSS选择器分组.pdf 学习资料 复习资料 教学资源
本人清风,这次给大家分享本人学习的心得和笔记,记录点点滴滴,用的md格式,这是第一个,CSS选择器
CSS基本选择器实用学习教案.pptx
CSS选择器分组案例.pdf 学习资料 复习资料 教学资源
CSS相关技术文档-例如CSS基础:类选择器。就是建立一个类,并为这个类定义一些样式,在需要应用的标签内以class=“类名”的形式套用,例如: .student{color:#00f;} “student”>张三 类名的前边一定要加上一个...
css入门学习笔记补充 补充了一些选择器
CSS基本选择器资料实用PPT学习教案.pptx
CSS基本选择器实用PPT课件.pptx
上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器
选择器共有三种: a)html标签选择器。 b)class选择器。 c)id选择器。 每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。 在定义的中,多个标签的class属性值可以相同,而id值要唯一,...
CSS属性选择器.pdf 学习资料 复习资料 教学资源
CSS组合选择器.pdf 学习资料 复习资料 教学资源
学习CSS过程中对于基础选择器、文本属性、字体属性的一些学习笔记和理解,正在学习html网页知识的可以参考一下。