CSS选择器重点笔记.docVIP

CSS选择器笔记 阮一峰 整理 参考网址： 456 Berea Street 一、基础选择器 序 号 选择器 含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配全部使用E标签元素 3. .info class选择器，匹配全部class属性中包含info元素 4. #footer id选择器，匹配全部id属性等于footer元素 实例： * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.info.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素组合选择器 序 号 选择器 含义 5. E,F 多元素选择器，同时匹配全部E元素或F元素，E和F之间用逗号分隔 6. E F 后代元素选择器，匹配全部属于E元素后代F元素，E和F之间用空格分隔 7. E F 子元素选择器，匹配全部E元素子元素F 8. 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; } 三、CSS 2.1 属性选择器 序 号 选择器 含义 9. E[att] 匹配全部含有att属性E元素，不考虑它值。（注意：E在此处能够省略，比如“[cheacked]”。以下同。） 10. E[att=val] 匹配全部att属性等于“val”E元素 11. E[att~=val] 匹配全部att属性含有多个空格分隔值、其中一个值等于“val”E元素 12. E[att|=val] 匹配全部att属性含有多个连字号分隔（hyphen-separated）值、其中一个值以“val” 开头E元素，关键用于lang属性，比如“en”、“en-us”、“en-gb”等等 实例： p[title] { color:#f00; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中伪类 序 号 选择器 含义 13. E:first-child 匹 配父元素第一个子元素 14. E:link 匹配全部未被点击链接 15. E:visited 匹配全部已被点击链接 16. E:active 匹 配鼠标已经其上按下、还没有释放E元素 17. E:hover 匹配鼠标悬 停其上E元素 18. E:focus 匹配取得目前焦点E元素 19. E:lang(c) 匹配lang属性等于cE元素 实例： p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: \201D \201D \ \ ; } 五、 CSS 2.1中伪元素 序 号 选择器 含义 20. E:first-line 匹配E元素第一行 21. E:first-letter 匹配E元素第一个字母 22. E:before 在E元素之前插入生成内容 23. E:after 在E元素以后插入生成内容 实例： p:first-line { font-weight:bold; color;#600; } .preamble:first-letter { font-size:1.5em; font-weight:bold; } .cbb:before { content:; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } a:link:after { content: ( attr(href) ) ; } 六、CSS 3同级元素通用选择器 序 号 选择器 含