关于选择器
1、只选中有href属性的a标签:
a[href]{color:ref;}
a[href][title]{color:red;}
同理,可以选中带有指定属性的指定标签均可这么做,要选细一点就多写几个属性即可,也可以把里面的属性的特性也指定出来,如【href="http://www.baidu.com"】,这样就选 到链接到百度地址的a标签
3、这种选择器要求属性与属性值完全匹配
用类名来选的话,.top1和.top2的顺序是不影响的,随便写
.top1 .top2{color:red;}
.top2 .top1{color:red;}
但是用属性选择器来选话,对顺序是有严格要求的,这2个选中的内容是不是同一个
p[class="top1 top2"]{color:red;}
p[class="top2 top1"]{color:red;}
4、要选择含有某一属性的内容,可以用~=来选,可理解为约等于,只要有就行了,类选择器可没有这种方法哟
p[class~="top"]{color:red;}
5、匹配一小部分内容的选择器,称为“子串匹配属性选择器”
[abc^="def"] /*选择 abc 属性值以 "def" 开头的所有元素*/ [abc$="def"] /*选择 abc 属性值以 "def" 结尾的所有元素*/ [abc*="def"] /*选择 abc 属性值中包含子串 "def" 的所有元素*/也就是:^= :以XXX开头; $= :以XXX结尾 ;*= :任意位置包含XXX
6、特定属性选择器,先理解为:|= :选择XXX或以XXX开头的元素
会选中 lang 属性等于 en 或以 en- 开头的所有元素
*[lang|="en"] {color: red;}
7、选中同时含有2个类名的内容 ,只要两个类名之间不加空格即可,也叫多类选择器
div.contain .blue{color:red;}
一般情况下,这样是选中类名为.contain的div后代中的类 .blue
但如果把两个类名之间的空格去掉则变成:选中同时含有contain和blue两个类的div。
div.contain.blue{color:red;}
<div class="contain"><div class="blue">选我!选我!</div></div> <div class="contain blue">选我!</div>
结果是:有空格的后代选择器选中第一段,没空格的多类选择器选中第二段。
两个类名之间的顺序无所谓。
注:id选择器之间必须要有空格,所以是不存在类似多类选择器的情况滴!