在平时开发中，使用CSS选择器真的很方便，不用定义多个类名，提高灵活性，本文学习用于记录，有不正确的地方还请各位大佬多多指正。
CSS选择器参考手册
先来看一下CSS选择器的参考手册，其中value在使用时最好使用“引号”包裹，否则只能匹配到字母
（markdown的表格语法存在"|“，因此想要输入”|"采用 |转义实现）
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
本文中采用的html代码：
<!-- html-->
<div>
<span class="title">css属性选择器</span>
<ul>
<li class="myli title">0</li>
<li class="title" id="li">1</li>
<li class="myli-2-end">2</li>
<li class="start-myli-3">3</li>
<li>与世无争的咸鱼</li>
<li class="my">5</li>
</ul>
</div>
[attribute]：选取含有该属性的元素
*[attribute]：*代表所有标签，即选取所有包含attribute的标签
/*选取所有包含class属性的元素 css*/
*[class] {
background-color: skyblue;
}
效果：
选中有id的标签
/*选取所有包含id属性的元素 css*/
*[id] {
background-color: skyblue;
}
li[class]：选取li中有class属性的元素（相比*，只选取li标签）
/*选取li中包含class属性的元素 css*/
li[class] {
background-color: skyblue;
}
效果：
[attribute=value]：选取含有该属性的元素
此处需要注意的是，attribute=value是完全匹配，如果attribute存在多个value不会被选取，本例子中第一个li的class中含有"myli"的类名，因此不会被选取
/*选取所有class=title的元素 css*/
*[class="title"] {
background-color: skyblue;
}
效果：
[attribute~=value]：选取属性值中包含指定词汇的元素
相比较与 [attribute=value]，此处为不完全匹配，只要attribute包含value即可，本例中可以选取到第一个li
/*选取所有class中包含值为title的元素 css*/
*[class~="title"] {
background-color: skyblue;
}
效果：
[attribute|=value]：选取带有以指定值开头的属性值的元素，该值必须是整个单词。
注意： 此处不会选取到class="myli"的元素，即attribute如果存在多个value将不会被匹配到，本例第一个li的class包含myli和title不会被选中，这一点非常细节
/*选取所有class中以myli开头的li css*/
li[class|="myli"] {
background-color: skyblue;
}
效果：
选取匹配my
/*选取所有class中以my开头的li css*/
li[class|="my"] {
background-color: skyblue;
}
效果：
[attribute^=value]：匹配属性值以指定值开头的每个元素。
相比于[attribute|=value]，^用法只要以value开头都可以选取到
/*选取所有class中以my开头的li css*/
li[class^="my"] {
background-color: skyblue;
}
效果：
如果没有完全等于value将不会被匹配到，此时修改匹配为myli字段时不会选取到最后一个li
/*选取所有class中以myli开头的li css*/
li[class^="myli"] {
background-color: skyblue;
}
效果：
[attribute$=value]：匹配属性值以指定值结尾的每个元素。
与^相反，$匹配的是结尾字符
/*选取所有class中以end结尾的li css*/
li[class$="end"] {
background-color: skyblue;
}
效果：
[attribute*=value]：匹配属性值包含指定值的每个元素。
/*选取所有class中包含myli的li css*/
li[class*="myli"] {
background-color: skyblue;
}
效果：
另外，多个条件选取的写法
/*选取所有class中即包含myli和title的li css*/
li[class*="myli"][class*="title"] {
background-color: skyblue;
}
效果：
