CSS3 选择器——笔记+实战案例

使用CSS3 选择器——笔记

CSS通过选择器控制HTML元素，CSS选择器对网页对象可以实现一对一、一对多或者多对一的匹配。

一、CSS3选择器分类

　　CSS选择器在CSS2.1选择器的基础上新增了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，使编写代码更加简单轻松。

　　根据所获取页面中元素的不同，可以把CSS3选择器分为5大类：基本选择器、组合选择器、伪类选择器、伪元素和属性选择器。其中，伪类选择器又分为6种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。

二、基本选择器

　　这里讲基本的CSS选择器：标签选择器、类选择器、类选择器、ID选择器和通配选择器。

2.1 标签选择器(CSS中使用率最高的一类选择器)

　　标签选择器直接引用HTML标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中默认的显示样式。因此，标签选择器可以快速、方便地控制页面标签的默认显示效果。

<style type="text/css">
p{
  font-size:12px; /*字体大小为12像素*/
  color:red; /*字体颜色为红色*/
}
</style>

　　通过标签选择器，统一定义网页中段落文本的样式为:段落内文本大小为12像素，字体颜色为红色。

2.2 类选择器

　　类选择器能够为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式，类选择器以一个(.)前缀开头，然后跟随一个自定义的类名。