CSS学习笔记-CSS选择器（二）

CSS选择器分类——基本选择器

选择器 含义 举例
通用选择器
通用选择器，将匹配任何元素。不建议使用，IE不支持，大网站增加客户端负担。 *{margin:0px;}

标签选择器
标签选择器，匹配所有HTML标签元素。 p{font-size:14px;}

类选择器 类选择，定义一类HTML元素的样式。类选择器以”.”来定义 .box{width:800px;}

Id选择器
Id选择器可以为标有特定ID的HTML元素指定特定的样式，只能使用一次。ID选择器以”#”来定义。 #title{font-size:14px;}

CSS选择器——组合选择器

选择器 含义 举例
E,F
多元素选择器 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 p,h1,h2{margin:0px;}

E F
后代元素选择器 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #slidebar p{font-color:#990000;}

E > F
子元素选择器 子元素选择器，匹配所有E元素的子元素F div > p{color:#990000;}

E + F
相邻元素选择器 相邻元素选择器，匹配所有紧随E元素之后的同级元素F div + div{ color:#990000; }

后代选择器：浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

CSS选择器——属性选择器

选择器 含义 举例
E[attr] 匹配所有具有att属性的E元素，不考虑它的值 h1[align]{……}

input[type][size]{……}

E[attr = val] 匹配所有attr属性值等于val的E元素 h1[align=center]{……}

属性值一般不加引号

CSS选择器——伪类选择器

对于标记，其对应4种不同的状态：未访问链接(link)、、鼠标放上状态(hover)、已访问链接(visited)、当前活动链接(active)–他们是有顺序的。CSS允许对于元素的不同状态，定义不同的格式化信息。

选择器 含义
a:link 未访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接
a:visited 已访问的链接
a.red:link class等于red的a元素
a.red:visited class等于red的a元素
a.red:active class等于red的a元素
a.red:hover class等于red的a元素