版权声明：本文为博主原创文章未经博主允许不得转载。 /Ljs_cn/article/details/
对HTML页面中的元素使用CSS实现一对一一对多或者多对一的控制，要用到CSS选择器在大篇CSS代码中，并没有说明什么樣式服务于什么元素只是在元素中使用了class属性。而class属性本身没有语义它纯粹是用来为CSS服务的，属于多余属性并没把样式和元素绑定起来，一个CSS类选择器文本框可以使用，下拉框也可以使用甚至按钮也可以使用，这样其实非常混乱 修改时就不方便，所以CSS3中提倡使鼡选择器来将样式与元素直接绑定起来这样的话，在样式中什么样式与什么元素相匹配就会变得一目了然修改起来也很方便。不仅如此通过css3选择器我们还可以实现各种复杂的指定， 同时也能大量减少样式表的代码书写量最终书写出来的样式表也会变得简洁明了。
|
通鼡元素选择器匹配任何元素 |
|
标签选择器，匹配所有使用E标签(所有HTML元素)的元素 |
|
class选择器匹配所有class属性中包含info的元素 |
|
id选择器，匹配所有id属性等于footer的元素 |
|
群组选择器将每一个选择器匹配的元素集合并 |
| 选择匹配的F元素，且F元素被包含在匹配的E元素内 |
| 选择匹配的F元素且F元素是E元素的子元素 |
| 选择匹配的F元素，且F元素是E元素后面紧邻的兄弟元素 |
| 选择匹配的F元素且F元素是E元素后面的所有兄弟元素 |
| 选中具有attr属性的E元素 | |
| 選中具有attr属性，并且属性值为val的E元素 | |
| 选中具有attr属性并且属性值为val或以val-开头 | |
| 选中具有attr属性，并且属性值包含val的E元素该属性值必须以空格隔开 | |
| 选中具有attr属性，并且属性值包含val的E元素 | |
| 选中具有attr属性并且属性值以val开始的E元素 | |
| 选中具有attr属性，并且属性值以val结束的E元素 |
上面的代码結构运行后 的 效果显示如下：
选中具有 cat 属性的 P元素并将其背景色设置为红色， 就需要用到 CSS3的属性选择器 代码如下：
选中具有 cat 属性，并苴属性值包含 old 的P元素 代码及效果图如下：
