1、作用 规范了页面中哪些元素能够使用定义好的样式 同时也帮助我们去匹配页面上的元素 2、选择器 1、通用选择器(了解) 1、作用 匹配页面上所有的元素 2、语法 *{样式声明;} 3、注意 效率低，尽量不用 尽可能通过 继承性 去代替通用选择器的效果 2、元素选择器 又名：标签选择器，标记选择器 1、作用 匹配页面某一指定元素 比如： 页面所有的 div 元素 页面所有的 p 元素 2、语法 元素{} ex: h1{color:red;} h2{color:blue;} 3、类选择器(重点) 1、作用 允许元素使用附带的class属性值，对选择器进行引用 2、语法 以 . 作为开始 .类名{}
类名：字母，数字，_,-组成,不能以数字开始 引用类选择器:通过元素的 class 属性，进行引用 <ANY class="类名"></ANY>3、特殊用法-分类选择器 设置class值为redColor的p元素的 背景颜色为 Yellow 1、作用 将 元素选择器和类选择器结合到一起，从而实现对某种元素的不同样式的细分控制 2、语法 元素选择器.类选择器{ 样式声明; } p.redColor{ background-color:yellow; } 4、特殊引用-多类选择器 1、作用 可以让一个元素同时引用多个类选择器,中间用空格分开即可 4、id选择器(重点) 1、作用 只匹配指定ID值得元素 2、语法 #id值{} 5、群组选择器 1 、作用 选择器声明以逗号来隔开的选择器列表.其目的是为了声明一组选择器中的公共样式 2、语法 选择器1,选择器2,选择器3,…,{ }
ex： 设置页面上所有的p元素，span元素，id为d1元素，class为redColor的元素的文本颜色 为 红色 p,span,#d1,.redColor{ color:red; } 等同于 p{color:red;} span{color:red;} #d1{color:red;} .redColor{color:red;}6、后代选择器 1 、作用 用于匹配某元素的后代元素时使用 2、语法 选择器1 选择器2{
} 7、子代选择器 1、作用 用于匹配某元素的子代元素 2、语法 选择器1>选择器2{ } 8、伪类选择器 1、作用 为了匹配元素不同的状态的 2、语法 :伪类选择器{} 3、分类 1、链接伪类 :link :匹配 超链接 未被访问时的状态 :visited :匹配 超链接 被访问过的状态 2、动态伪类 :hover :匹配鼠标悬停在 html 元素时的状态 :active : 匹配 html元素 被激活时的状态 :focus : 匹配html元素获取焦点时的状态(文本框与密码框)
3、目标伪类 4、元素状态伪类 5、结构伪类 6、否定伪类