且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

《图解CSS3:核心技术与案例实战》——2.1节认识CSS选择器

更新时间:2022-10-08 10:38:46

本节书摘来自华章社区《图解CSS3:核心技术与案例实战》一书中的第2章,第2.1节认识CSS选择器,作者 大漠,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.1 认识CSS选择器
要使某个样式应用于特定的HTML元素,首先需要找到该元素。在CSS中,执行这一任务的表现规则称为CSS选择器。它为获取目标元素之后施加样式提供了极大的灵活性。实际上,CSS2.1已经为大家提供了很多常用的选择器,基本能够满足Web设计师常规的设计需求。

2.1.1 CSS3选择器的优势
既然CSS选择器能满足Web常规的设计需求,CSS3选择器有什么优势呢?CSS3选择器不但支持所有CSS选择器,同时新增了独有的选择器,对拥有一定CSS基础的开发人员来说,学习CSS3选择器是件非常容易的事。
CSS3选择器在常规选择器的基础上新增了属性选择器、伪类选择器、过滤选择器。可以帮助您在开发中减少对HTML类名或ID名的依赖,以及对HTML元素的结构依赖,使编写代码更加简单轻松。如果学习过jQuery选择器,学习CSS3选择器会更容易,因为CSS3选择器在某些方面和jQuery选择器是完全一样的,唯一遗憾的是部分旧版本浏览器并不支持CSS3新增的部分选择器。下面一起来体验CSS3选择器。

2.1.2 CSS3选择器分类
根据所获取页面中元素的不同,把CSS3选择器分为五大类:基本选择器、层次选择器、伪类选择器、伪元素和属性选择器。其中,伪类选择器又分为六种:动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器,结构伪类选择器和否定伪类选择器,如图2-1所示。


《图解CSS3:核心技术与案例实战》——2.1节认识CSS选择器

下面分别介绍这十种选择器。