CSS3选择器相关.docx

CSS3选择器相关 CSS3选择器 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 ? ?在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示： 选择器描述E[att^=”stringvalue”]匹配元素E且E元素定义了att属性，该属性以stringvalue的内容开头E[att$=”stringvalue”]匹配元素E且E元素定义了att属性，该属性以stringvalue的内容结尾E[att*=”stringvalue”]匹配元素E且E元素定义了att属性，该属性的任意位置包含了stringvalue的内容。 (单击可放大) 实例展示： html代码： a href=xxx.pdf我链接的是PDF文件/a a href=# class=icon我类名是icon/a a href=# title=我的title是more我的title是more/a css代码?? a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; } 结果显示： INCLUDEPICTURE \d /53202e050001c07jpg \* MERGEFORMATINET  CSS3 结构性伪类选择器—root :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html。 示例演示： 通过“:root”选择器设置背景颜色 HTML代码： div:root选择器的演示/div CSS代码： :root { background:orange; } 演示结果： INCLUDEPICTURE \d /531eb101560050.jpg \* MERGEFORMATINET  “:root”选择器等同于html元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。 建议使用:root方法。 另外在IE９以下还可以借助“:root”实现hack功能。 CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。 语法如下： 选择器描述E：not（[type=”typename”]{}E为标签选择器，not（）的参数是被排除使用该样式的属性名。 就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; }input:not([type=submit]){ border:1px solid red; } 相关HTML代码： form action=# div label for=nameText Input:/label input type=text name=name id=name placeholder=John Smith / /div div label for=namePassword Input:/label input type=text name=name id=name placeholder=John Smith / /div div input type=submit value=Submit / /div /form ? 演示结果： INCLUDEPICTURE \d /531eb2ca00014b5002370177.jpg \* MERGEFORMATINET  CSS3 结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 选择器描述E：empty{ }E为标签选择器，匹配该标签的元素若为空则使用{} 中定义的样式 示例显