《HTML 5与CSS 3 权威指南(第4版·下册)》 —16 选 择 器

举报
华章计算机 发表于 2019/11/21 12:29:36 2019/11/21
【摘要】 本节书摘来自华章计算机《HTML 5与CSS 3 权威指南(第4版·下册)》一书中第16章,第16.1节,作者是陆凌牛。

第16章

选 择 器

本章针对CSS 3中使用的各种选择器进行详细介绍,通过选择器的使用,你不再需要在编辑样式时使用多余的以及没有任何语义的class属性,而是直接将样式与元素绑定起来,从而节省大量在网站或Web应用程序已经完成之后修改样式时所需花费的时间。

学习内容:

掌握CSS 3中使用的选择器的基本概念。知道什么是选择器以及为什么需要使用选择器,使用选择器有什么好处。

掌握CSS 3中的各种属性选择器的概念以及使用方法,其中包括:

[att=val]选择器

[att*=val]选择器

[att^=val]选择器

[att$=val]选择器

掌握CSS3中的各种结构性伪类选择器的概念以及使用方法,其中包括:

root选择器

not选择器

empty选择器

target选择器

first-child选择器

last-child选择器

nth-child选择器

nth-last-child选择器

nth-of-type选择器

nth-last-of-type选择器

only-child选择器

掌握CSS3中的各种UI元素状态伪类选择器的概念以及使用方法,其中包括:

E:hover选择器

E:active选择器

E:focus选择器

E:enabled选择器

E:disabled选择器

E:read-only选择器

E:read-write选择器

E:checked选择器

E:default选择器

E:indeterminate选择器

E::selection选择器

E:invalid选择器

E:valid选择器

E:required选择器

E:optional选择器

E:in-range选择器

E:out-of-range选择器

掌握CSS3中的通用兄弟元素选择器的概念及使用方法。

16.1 选择器概述

选择器是CSS 3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。

在样式表中,一般会书写大量的代码,在大型网站中,样式表中的代码可能会达到几千行。麻烦的是,当整个网站或整个Web应用程序全部书写好之后,需要针对样式表进行修改时,在洋洋洒洒一大篇CSS代码之中,并没有说明什么样式服务于什么元素,只是使用了class属性,然后在页面中指定了元素的class属性。但是,使用元素的class属性有两个缺点:第一,class属性本身没有语义,它纯粹用来为CSS样式服务,属于多余属性;第二,使用class属性的话,并没有把样式与元素绑定起来,针对同一个class属性,文本框也可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实是非常混乱的,修改样式时也很不方便。

所以,在CSS 3中,提倡使用选择器来将样式与元素直接绑定起来,这样的话,在样式表中什么样式与什么元素相匹配变得一目了然,修改起来也很方便。不仅如此,通过选择器,我们还可以实现各种复杂的指定,同时也能大量减少样式表的代码书写量,最终书写出来的样式表也变得简洁明了。

具体来说,使用选择器进行样式指定时,采用类似E[foo$="val"]这种正则表达式的形式。在样式中,声明该样式应用于什么元素,该元素的某个属性的属性值必须是什么。例如,我们可以指定将页面中id为“div_Big”的div元素的背景色设定为红色,代码如下所示。

div[id="div_Big"] {background: red;}

这样,符合这个条件(id为“div_Big”)的div元素的背景色被设为红色,不符合这个条件的div元素不使用这个样式。

另外,我们还可以在指定样式时使用“^”通配符(开头字符匹配)、“?”通配符(结尾字符匹配)与“*”通配符(包含字符匹配)。如指定id末尾字母为“t”的div元素的背景色为蓝色,代码如下所示。

div[id$="t"] {background: red;}

使用通配符能大大提高样式表的书写效率。


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。