学习笔记2 ——关于选择器

关于选择器

1、只选中有href属性的a标签：

a[href]{color:ref;}

2、选的更细一点，要选中同时有href和title属性的a标签里的内容：

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选择器之间必须要有空格，所以是不存在类似多类选择器的情况滴！