css选择器

这篇文章主要总结了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