CSS选择器笔记.doc

《CSS选择器笔记.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS选择器笔记一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infoclass选择器，匹配所有class属性中包含info的元素4.#footerid选择器，匹配所有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#i

2、nfo{background:#ff0;}二、多元素的组合选择器序号选择器含义5.E,F多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔6.EF后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔7.E>F子元素选择器，匹配所有E元素的子元素F8.E+F毗邻元素选择器，匹配所有紧随E元素之后的同级元素F实例：divp{color:#f00;}#navli{display:inline;}#nava{font-weight:bold;}div>strong{color:#f00;}p+p{color:#f00;}三、CSS2.1属性选择器序号

3、选择器含义9.E[att]匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）10.E[att=val]匹配所有att属性等于“val”的E元素11.E[att~=val]匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素12.E[att

4、=val]匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等实例：p[title]{color:#f00;}div[cl

5、ass=error]{color:#f00;}td[headers~=col1]{color:#f00;}p[lang

6、=en]{color:#f00;}blockquote[class=quote][cite]{color:#f00;}四、CSS2.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

7、:lang(c)匹配lang属性等于c的E元素实例：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""2019""2019";}五、CSS2.1中的伪元素序号选择器含义20.E:first-line匹配E元素的第一行21.E:first-letter匹配E元素的第一个字母22.E:before在

8、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-repeat00;margin:000-18px;}a:link:after{content:"("attr(href)")";}

9、六、CSS3的同级元素通用选择器序号选择器含义24.E~F匹配任何在E元素之后的同级F元素实例：p~ul{background:#ff0;}七、CSS3属性选择器序号选择器含义25.E[att^=”val”]属性att的值以"val"开头的元素26.E[att$=”val”]属性att的值以"val"结尾的元素27.E[att*=”val”]属性att的值包含"val"字符串的元素实例：div[id^="nav"]{background:#ff0;}八、CSS3中与用户界面有关的伪类序号选择器含义28.E:enabled匹配表单中激活的元