这篇文章主要总结了css选择器的相关知识
1.元素选择器
<div id="container">
<p class="text"></p>
<h1 class="title text"></h1>
<div>
// 选中p元素
p{
font-size: 12px;
}
2. 群组选择器
//html同上,同时选中p和h1元素
p,h1{ color: #000; }
3. 类选择器
//html同上，选中类为text的元素
//此处同时选中p元素和h1元素
.text{ color: #dedede; }
//如果要只选中类是text的p元素，可以这么写
p .class{ padding: 20px; }
4. ID选择器
#container{ background-color: bule; }
//在一个DOM结构里面，元素id唯一
5. 通配符选择器
// 选择所有元素
*{ color: #dedede; }
6. 属性选择器
<div>
<p class="text"></p>
<p class="text title"></p>
<h1 class="text"></h1>
<img alt="image1"/>
<img alt="image2"/>
<img alt="jpg-png-image"/>
</div>
简单选择
//选择所有带class属性的元素，此处选中的又p、p、h1
[class]{ }
//选择所有带class属性的p元素, 此处选中有p、p
p[class]{ }
精准选择
//选择class属性为text的p元素，注意了，这里class只能为'text',而对'text title'无效
//此处选中的只有第一个p元素
p[class='text']{}
//此处选中的是第一个和第二个p元素
p[class='text title']{}
那么如果我想两个p元素都选择呢？那就接着看匹配选择
匹配选择
匹配选择的符号有挺多，也代表了不同的含义
以某个单词开头：[arr|=value]
匹配属性值是以某个单词或者单词_开头的元素（比如foo foo_bar,单词要以空格隔开）
//选中alt属性是以image单词或者image_开头的元素，此处选中第一第二个img元素
[alt|=image]{}
//选择的元素
<img alt="image image2"/>
<img alt="image_image2"/>
包含：[arr~=value]
匹配属性值包含某个单词的元素（单词之间以空格隔开）
[alt~=png]{}
// 选择的元素
<img alt="jpg png image"/>
以字串开头：[arr^=value]
匹配属性值是某个子串开头的元素，这里和[arr|=value]有点区别，[arr^=value]不需要是单词开头，只要是字串开头都可以
[alt^="image"]
//匹配的元素
<img alt="image12"/>
包含字符串：[alt*=value]
匹配属性值包含某个子串的元素，和[arr=value]有差别，[arr=value]限定是包含某个单词，[alt*=value] 是包含某个子串就可以，注意区分
[alt^="image"]
//匹配的元素
<img alt="these are some images"/>
以字符串结尾：[arr$=value]
匹配属性值以某个子串结尾的元素
[alt^=".png"]
//匹配的元素
<img alt="demo.png"/>
不区分属性值大小写
在属性值后面加个i