CSS的属性选择符

上周我们学习了CSS的三种常用的选择符，今天我们学习一种特殊的选择符----属性选择符。属性选择符一般是根据元素具体的属性就和属性值去寻找元素。

1.选择包含该属性的所有元素：[属性名] 例如：[src] 选择包含src属性的所有元素。选择了<image src="">

2.选择该属性值为“属性值”的所有元素：[属性名=属性值] 例如：[readonly=true] 选择所有有readonly属性，且值为true的元素。选择了<input type ="text" readonly ="true">

3.选择的是该属性的属性值存在其他值的所有元素：[属性名~=属性值] 例如：[data-vegetable~=spicy] 选择所有有data-vegetable属性，且值存在的spicy元素。选择了 <li data-vegetable =" no spicy like chili">

4.选择该属性值为“属性值”或以该“属性值-”开头的所有元素：[属性名|=属性值]  例如：[data-vegetable|=spicy] 选择所有有data-vegetable属性，且值为的spicy或值以spicy-开头的元素。 选择了 <li data-vegetable =" spicy">或<li data-vegetable =" spicy-no">

5.选择该属性值为“属性值”或以该属性值开头的所有元素：[属性名^=属性值] 例如：[data-vegetable|=spicy] 选择所有有data-vegetable属性，且值为的spicy或值以spicy开头的元素。 选择了 <li data-vegetable =" spicy">或<li data-vegetable =" spicyno">

6.选择该属性值为“属性值”或以该属性值结尾的所有元素：[属性名$=属性值] 例如：[data-vegetable|=spicy] 选择所有有data-vegetable属性，且值为的spicy或值以spicy结尾的元素。 选择了 <li data-vegetable =" spicy">或<li data-vegetable =" nospicy">

7.选择该属性值中包含字符串“属性值”的所有元素：[属性名*=属性值] 例如：[data-vegetable|=spicy] 选择所有有data-vegetable属性，且值中存在字符串“spicy”的元素。 选择了 <li data-vegetable =" spicyno">或<li data-vegetable =" nospicyno">或<li data-vegetable =" nospicy">

属性选择符我们一般会结合常用选择符使用，因为它使用的是属性和属性的值选择元素，所以会耗费你网页的性能。所以想要写出的网页加载快要尽量避免写属性选择符哦。

优化网页性能，要从开始的时候就养成良好的习惯。关于CSS样式优化的部分可以借鉴：http://caibaojian.com/616.html

或者https://www.zhihu.com/question/19886806

最近国内的网站进步很大，有很多问题可以直接度娘。或者你英文好可以浏览一些外国的网站收益会更大。

（上述所有网站跟本人无关）