CSS3选择器.pdf

基本涵盖了CSS 2 和 CSS 3 的所有规定。=参考网址：456 Berea Street一、基本选择器序号选择器含义1.*通用元素 选择器，匹配任何元素2.E 标签 选择器，匹配所有使用E 标签的元素3.info class 选择器，匹配所有class 属性中包含info 的元素4.#footer id 选择器，匹配所有id 属性等于footer 的元素实例：*margin:0;padding:0;#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.Eatt 匹配所有 具有 att 属性 的 E 元素，不考虑它的值。（注意：E在此处可以省略，比如“cheacked”。以下同。）10.Eatt=val 匹配所有att 属性等于“val”的 E 元素11.Eatt=val 匹配所有 att 属性 具有多个 空格分隔 的值、其中 一个值等于“val”的 E 元素12.Eatt|=val 匹配所有 att 属性具有多个连字号分隔（hyphen-separated）的值、其中 一个值以“val”开头 的 E 元素，主要用于lang 属性，比如“en”、“en-us”、“en-gb”等等实例：ptitle color:#f00;divclass=error color:#f00;tdheaders=col1 color:#f00;plang|=en color:#f00;blockquoteclass=quotecite 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 属性等于c 的 E 元素实例：p:first-child font-style:italic;inputtype=text:focus color:#000;background:#ffe;inputtype=text:focus:hover background:#fff;q:lang(sv)quotes:201D 201D 2019 2019;五、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);-以下为 css3-六、CSS 3 的同级元素通用选择器序号选择器含义24.E F 匹配任何在E 元素之后的同级F 元素实例：p ul background:#ff0;七、CSS 3 属性选择器序号选择器含义25.Eatt=”val”属性 att 的值 以 val 开头 的元素26.Eatt$=”val”属性 att 的值 以 val 结尾 的元素27.Eatt*=”val”属性 att 的值 包含 val 字符串 的元素实例：divid=nav background:#ff0;八、CSS 3 中与用户界面有关的伪类序号选择器含义28.E:enabled 匹配 表单中激活的元素29.E:disabled 匹配 表单中禁用的元素30.E:checked 匹配表单中 被选中的radio（单选框）或checkbox（复选框）元素31.E:selection 匹配 用户当前选中的元素实例：inputtype=text:disabled background:#ddd;九、CSS 3 中的结构性伪类序号选择器含义32.E:root 匹配文档的 根元素，对于 HTML 文档，就是HTML 元素33.E:nth-child(n)匹配其父元素的第 n 个子元素，第一个编号为134.E:nth-last-child(n)匹配其父元素的倒数第 n 个子元素，第一个编号为135.E:nth-of-type(n)与:nth-child()作用类似，但是 仅匹配使用同种标签的元素36.E:nth-last-of-type(n)与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素37.E:last-child 匹配父元素的 最后一个子元素，等同于:nth-last-child(1)38.E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)39.E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)40.E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)41.E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)42.E:empty 匹配一个 不包含任何子元素的元素，注意，文本节点也被看作子元素实例：p:nth-child(3)color:#f00;p:nth-child(odd)color:#f00;p:nth-child(even)color:#f00;p:nth-child(3n+0)color:#f00;p:nth-child(3n)color:#f00;tr:nth-child(2n+11)background:#ff0;tr:nth-last-child(2)background:#ff0;p:last-child background:#ff0;p:only-child background:#ff0;p:empty background:#ff0;十、CSS 3 的反选伪类序号选择器含义43.E:not(s)匹配不符合当前选择器的任何元素实例：:not(p)border:1px solid#ccc;十一、CSS 3 中的:target 伪类序号选择器含义44.E:target 匹配文档中特定id点击后的效果请参看 HTML DOG上关于该选择器的详细解释 和实例。