简述几种常用的css选择器(Web前端开发进阶篇)

上一篇文章我们把「Web前端开发进阶篇」CSS定位和浮动讲解完了,接着我们来讲解下一篇文章,关于CSS选择器的内容知识,小伙伴们跟上我的节奏,动起来,Let's go!

【引言】

在学习CSS的过程中,选择器的便捷使用会让你在开发的过程中游刃有余,节省大量js代码的同时,让你的CSS代码变得精简,页面灵活度也会提高很多。

在CSS中,选择器是一种模式,就是选择你想添加样式的元素。选择器的类型居多,需要熟练使用才能让页面更加灵活,兼容性才不会出现很大的差异。

接下来让我详细的给大家介绍一下。

元素选择器

这是最常见的CSS元素选择器,就是拿文档的元素来作为最基本的选择器,说白了就是拿HTML标签来做选择器。例如:

简述几种常用的css选择器(Web前端开发进阶篇)(1)

元素选择器

如上图所示,我们直接拿文档的元素作为选择器来添加我们想要的样式。

类型选择器

使用类型选择器来匹配语言元素类型的名称,它会匹配文档树中该元素类型的每一个实例,说白了就是给文档树下选择的每一个元素添加一个统一的样式。不管是XML文档还是CSS文档都可以使用类型选择器来添加样式。例如:

简述几种常用的css选择器(Web前端开发进阶篇)(2)

XML文档

简述几种常用的css选择器(Web前端开发进阶篇)(3)

CSS文档

如上图所示,我们直接选择给某一个类型的语言元素来添加我们想要的样式。

选择器分组

假设我们对不同的文档元素添加同一样式,要想达到这个目的,我们就可以用选择器分组来实现这个目的。例如:

简述几种常用的css选择器(Web前端开发进阶篇)(4)

选择器分组

我们可以将众多的选择器用逗号分开,就定义了一个规则,可以将任意多个选择器分组在一起,对此没有任何的限制,省去了大量的代码,也方便管理。就不用像下面这么写了。

简述几种常用的css选择器(Web前端开发进阶篇)(5)

没有进行选择器分组

1、通配型选择器

这是选择器分组里面的一种选择器 - 通配选择器,显示为一个星号(*)。该选择器可以与任何元素匹配,就像一个通配符。例如:

id*{margin:0;padding:0;}

2、声明分组

我们既可以对选择器进行分组,也可以对声明分组。说白了就是给选择器分开来写添加不一样的样式而已。就是说我给h1添加个字体颜色,在别的地方我给它添加个字体大小,这样有利于管理,在实际开发中用的也比较多。但是效率不高。我们将采用结合选择器和声明的分组的写法来写CSS,例如:

简述几种常用的css选择器(Web前端开发进阶篇)(6)

结合选择器和声明的分组

CSS类选择器

类选择器允许以一种独立于文档元素的方式来指定样式,可以单独适应,也可以结合其他元素结合使用。注意:只有适当地标记文档后,才可以使用这些选择器,这是最常用的,说白了就是只有给文档添加class才可以使用类选择器。

为了将类选择器的样式与元素关联,必须为Class制定一个适当的值,就是添加一个class。然后用class来指定样式。

可以为不同的元素指定同一个Class。然后通过选择器来添加样式,例如:

简述几种常用的css选择器(Web前端开发进阶篇)(7)

CSS类选择器

1、CSS多类选择器

就是说Class值里有多个Class值,我们用空格分开,用不同的值指定不同的样式。

注意:里面的值不分顺序。如果把两个类选择器连接在一起,仅可以选择同时包含这些类名的元素(顺序也不限)。例如:

简述几种常用的css选择器(Web前端开发进阶篇)(8)

CSS多类选择器

CSS ID选择器

ID选择器跟类选择器差不多,就是给元素添加相应的ID才可以使用ID选择器,类选择器是引用Class值进行绑定添加样式,ID选择器是通过引用ID值进行绑定添加样式。例如:

简述几种常用的css选择器(Web前端开发进阶篇)(9)

ID选择器

1、与类选择器不同,需要区别注意:

区别1:ID只能在一个HTML文档中使用一次,ID选择器也会使用一次,而且仅一次。

区别2:不能使用ID词列表,就是说id="只能一个值",不允许有以空格分割的词列表。

区别3:ID能包含更多含义,就是说能对不同文档中的同一个ID进行元素匹配。相当于给所有的文档定义一个ID选择器,给他们添加样式。

2、区分大小

类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。

属性选择器

属性选择器可以根据元素的属性值来选择元素。比如图片的title属性,a标签的href,也可以是同时有title和href的拆链接,都可以用属性选择器添加样式。例如:

简述几种常用的css选择器(Web前端开发进阶篇)(10)

根据元素的属性值来选择元素

1、根据具体属性值选择

你也可以缩小选择范围,选择特定属性值的元素。可以是一个属性值也可以是多个特定的属性。可以是标签属性,也可以是XML文档的语言属性,更可以是元素的属性值,例如:

简述几种常用的css选择器(Web前端开发进阶篇)(11)

根据具体属性值选择

2、根据部分属性值

就像正则表达式一样,可以匹配相似的元素,比如说匹配属性值中的词列表的某个词,使用(~)号就可以匹配到,说白了,就是在众多的属性值中选择一个,然后进行匹配。

简述几种常用的css选择器(Web前端开发进阶篇)(12)

根据部分属性值

3、子串匹配属性选择器

这个更像正则表达式一样,去匹配我们相匹配的元素。

简述几种常用的css选择器(Web前端开发进阶篇)(13)

子串匹配属性选择器

例如:如果希望对指向百度的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需这样写:

a[href*="w3school.com.cn"] {color: red;}

4、特定属性选择类型

我们可以用特定属性选择类型来匹配语言值。例如:

简述几种常用的css选择器(Web前端开发进阶篇)(14)

特定属性选择类型

在比如说你在文档中插入了一系列图片,其中图片的命名形如:picture-1、picture-2等等,就可以像这样进行匹配了,

简述几种常用的css选择器(Web前端开发进阶篇)(15)

[attribute|=value]

总结一下属性选择器:灵活多运,用多了才不会出错。

简述几种常用的css选择器(Web前端开发进阶篇)(16)

属性选择器

后代选择器

简单说后代选择器可以选择作为某元素后代的元素。就是拿文档元素的层级关系作为选择器来添加样式,比如说,我先找div属性为Class值为important的元素,在找到它下面的h1元素,给他添加样式,例如:

简述几种常用的css选择器(Web前端开发进阶篇)(17)

后代选择器

后代选择器功能强大,也是最常用的,也是最简单易用的,实现了很多选择器不能实现的任务。

CSS 子元素选择器

如果你不希望选择任意的后代元素,只是某个元素的子元素,就可以使用它,如果有多个相同子元素,都能匹配到父元素里相同的子元素。我们通常用(>)大于号来表示。注意符号的两边允许有空格。例如:

选择作为 h1 元素子元素的所有 strong 元素:

简述几种常用的css选择器(Web前端开发进阶篇)(18)

子元素选择器

CSS 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素就可以使用相邻兄弟选择器,还可以结合其他结合符,例如:

简述几种常用的css选择器(Web前端开发进阶篇)(19)

相邻兄弟选择器

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

1、锚伪类

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。例如:

简述几种常用的css选择器(Web前端开发进阶篇)(20)

锚伪类

2、:first-child伪类

2.1 可以使用 :first-child 伪类来选择元素的第一个子元素。

2.2 可以使用 :nth-child(n) 伪类来选择元素的第n个子元素。n也可以作为表达式,例如:n 1、2n、等数学表达式

2.3 可以使用 :first-of-type 伪类来选择元素的第一个子元素。(CSS3选择器,等同2.1)

2.4 可以使用 :nth-of-type(n) 伪类来选择元素的第n个子元素。n也可以作为表达式,例如:n 1、2n、等数学表达式,(CSS3选择器,等同2.2)

3、:lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。

例如:

简述几种常用的css选择器(Web前端开发进阶篇)(21)

伪类

CSS 伪元素

CSS 伪元素用于向某些选择器设置特殊效果

1、:first-line 伪元素:用于向文本的首行设置特殊样式

2、:first-letter 伪元素:用于向文本的首字母设置特殊样式:

3、多重伪元素:可以结合多个伪元素来使用。

4、:before 伪元素:可以在元素的内容前面插入新内容。

5、:after 伪元素:可以在元素的内容之后插入新内容。

例如:

简述几种常用的css选择器(Web前端开发进阶篇)(22)

CSS 伪元素

总结

CSS选择器灵活多运,用法也是相当的多,可以使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制。多多使用练习,在开发中效率会提高不少,这也是前端开发必备的技能。


CSS选择器今天就讲解到这里了,下一篇讲解CSS高级语法,希望大家不要放弃学习哦!

PS:

本文为‘Web前端进阶指南’原创,手动码字不易,小伙伴们别忘了顺手点个赞加个关注哈,有什么不懂的下方留言评论或私信。谢谢大家哈!

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页