E(p,span,li)
标签选择器,匹配所有使用E标签的元素
.class(类名)
class选择器,匹配所有class属性中包含class的元素
#id
id选择器,匹配所有id属性等于id的元素
Selector1,selecttor2
群组选择器,将每一个选择器匹配元素合并
浏览器兼容性:兼容所有浏览器
通配选择器
通配选择器(*),表示所有元素
{ margin:0; padding:0; }
元素选择器/标签选择器
p { font-size:2em; }
ID选择器
使用id,需要在HTML先设置id属性的值,才能找到,具有唯一性,同一页面有且仅有一个。
#info { background:#ff0; }
类选择器
类选择器同一页面可以有多个相同类名,多类选择器,包含的类名其中有一个不存在,这个选择器将无法找到相匹配的元素
.info { background:#ff0; }
群组选择器
p.info,p.info.error { background:#ff0; } p.info.error,p#info { color:#900; font-weight:bold; }
层次选择器
E~F
通用选择器,选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
E F
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
E > F
子元素选择器,匹配所有E元素的子元素F
E + F
毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
实例:
div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; }