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文件/aa href=# class=icon我类名是icon/aa href=# title=我的title是more我的title是more/acss代码??a[class^=icon]{ background: green; color:#fff;}a[href$=pdf]{ background: orange; color: #fff;}a[title*=more]{ background: blue; color: #fff;}结果显示：CSS3 结构性伪类选择器—root:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html。示例演示：通过“:root”选择器设置背景颜色HTML代码：div:root选择器的演示/divCSS代码：:root { background:orange;}演示结果：“: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 ?演示结果：CSS3 结构性伪类选择器—empty:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。选择器描述E：empty{}E为标签选择器，匹配该标签的元素若为空则使用{}中定义的样式示例显示：比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。HTML代码：p我是一个段落/pp /pp/p?CSS代码：p{ background: orange; min-height: 30px;}p:empty { display: none;}?演示结果：CSS3 结构性伪类选择器—target:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。选择器描述#id：target{}Id为对应的目标容器，当绑定该容器的超链接被触发时对目标容器应用{}中的样式示例展示点击链接显示隐藏的段落。HTML代码：h2a href