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所示。