1、元素选择器
元素选择器是最简单的选择器,其语法如下:
E{.....}/*E代表有效的HTML元素名,后面内容中的E都是代表元素名*/。
在定义css样式时,通常会使用通配符“*”来匹配HTML文档中的任意元素,不过,由于*会匹配所有的元素,这样会影响网页渲染的时间,因此很多人开始停止使用*通配符选择器,取而代之的是,把所有需要统一设置的元素,放在一起,一块设置。
2、属性选择器
从广义角度来看,元素选择器其实是属性选择器的特例。属性选择器有以下几种语法格式。
- E{...}:指定该css样式对所有E元素起作用。
- E[attr]{...}:指定该css样式对具有attr属性的E元素起作用。
- E[attr=value]{...}:指定该css样式对所有包含attr属性且该属性值为value的E元素起作用。
- E[attr ~=value]{...}:指定该css样式对所有包含attr属性,且attr属性的值为以空格隔开的系列值,其中某个值为value的E元素起作用。
- E[attr |=value]{...}:指定该css样式对所有包含attr属性,且attr属性的值为以连字符分隔得系列值,其中第一个值为value的Tag元素起作用。
- E[attr^="value"]{...}:指定该css样式对所有包含attr属性,且attr属性的值以value开头的字符串的E元素起作用。
- E[attr$="value"]{...}:指定该css样式对所有包含attr属性,且attr属性的值以value结尾的字符串的E元素起作用。
- E[attr*="value"]{...}:指定该css样式对所有包含attr属性,且attr属性的值为包含value的字符串的E元素起作用。
以上几个选择器匹配的规则越严格优先级越高,而且也并没有得到所有浏览器的广泛支持。使用示例如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 属性选择器 </title> <style type="text/css"> /* 对所有div元素都起作用的CSS样式 */ div { width:300px; height:30px; background-color:#eee; border:1px solid black; padding:10px; } /* 对有id属性的div元素起作用的CSS样式 */ div[id] { background-color:#aaa; } /* 对有id属性值包含xx的div元素起作用的CSS样式 */ div[id*=xx] { background-color:#999; } /* 对有id属性值以xx开头的div元素起作用的CSS样式 */ div[id^=xx] { background-color:#555; color:#fff; } /* 对有id属性值等于xx的div元素起作用的CSS样式 */ div[id=xx] { background-color:#111; color:#fff; } </style> </head> <body> <div>没有任何属性的div元素</div> <div id="a">带id属性的div元素</div> <div id="zzxx">id属性值包含xx子字符串的div元素</div> <div id="xxyy">id属性值以xx开头的div元素</div> <div id="xx">id属性值为xx的div元素</div> </body> </html>
其效果如下:
3、ID选择器
ID选择器指定css样式对具有指定id属性的HTML元素起作用,返回值为单个元素。语法格式为:#idValue{...}。
4、class选择器
语法格式为:[E].classValue{......}
5、包含选择器
语法格式为:Selector1 Selector2{......}/*其中Selector1 和Selector2都是有效的选择器*/
6、子选择器(>)
子选择器用于指定目标必须是某个选择器对应的元素的子元素。语法格式为:Selector1>Selector2{......}/*其中Selector1 和Selector2都是有效的选择器*/
包含选择器与子选择器有点相似,存在的区别为:对于包含选择器,只要目标选择器位于外部选择器对应的元素内部,即使是“孙子元素”也可以,但对于子选择器来说,要求是外部选择器对应的元素的直接子元素,即“儿子元素”。
7、兄弟选择器(~,也可以叫同辈元素选择器)
兄弟选择器是CSS3.0新增的一个选择器。语法格式为:Selector1~Selector2{......}。该选择器匹配与Selector1对应的元素后面、能匹配Selector2 的兄弟节点。
8、相邻元素选择器(+)
语法格式为:Selector1+Selector2{......}。选择紧邻Selector1元素之后的Selector2元素
9、选择器组合
语法格式为:Selector1,Selector2,Selector3{......}/*其中Selector1 、Selector2和Selector3都是有效的选择器*/
10、伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器,它只能对CSS中已有的伪元素起作用。CSS提供的伪元素选择器有以下几个。
- first-letter:该选择器对应的CSS样式对指定对象内的第一个字符起作用。(对块元素起作用)
- first-line:该选择器对应的CSS样式对指定对象内的第一行内容起作用。(对块元素起作用,只对第一行起作用,与换行方式无关)
- before:该选择器与内容相关的属性结合使用,用于在指定对象内部的前端插入内容。
- after:该选择器与内容相关的属性结合使用,用于在指定对象内部的尾部插入内容。
选择器的优先级
一般来说,选择器的优先级(从上往下依次降低)是:
-
-
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器(元素选择器)
- 通配符选择器
-