（5）CSS选择器详解

1.元素选择器

最常见的选择器，文档的元素就是最基本的选择器，例如：div{}

2.选择器分组

分组就是对个元素在一起用逗号隔开

h1,h2{color:red;}

还有一个就是通配符，用*表示如果没有元素没有自定义相关属性，就执行通配中的属性

*{
    color: red;
    margin: 0px;
    padding: 0px;
}

3.类选择器

类选择器允许以一种独立于文档元素的方式来指定样式，例如：.class{}
可以结合元素选择器使用：例如：div.class{}
多类选择器，在HTML中不同的类之间用空格隔开，例如：.class .class .class{}

4.ＩＤ选择器

类似于类选择器，使用方式是：#id{}
id选择器和类选择器的区别：id只能在HTML文档中使用一次，而 类可以使用多次，当使用js时，需要用到id。
数据加载时，id是先找到结构再找到内容然后再去渲染，而类是先渲染再找到结构再找到具体内容。

5.属性选择器

简单的属性选择器：例如：[title]{}
根据具体的属性值选择：除了选择拥有某些元素，还可以进一步缩小选择范围，只选择有特定属性值的元素
属性和属性值完全匹配才可以选择
可根据部分属性值进行选择：[title ~=“title”]{}，只要title属性值中包含title就可以选择上

6.后代选择器

可以选择某元素的所有后代元素的选择器

<p>this is my <strong>web</strong> page</p>

p strong{
    color:red;
}

7.子元素选择器

只能选择作为某元素子元素的元素，例如：h1 > strong{}，只选择h1元素的子元素，但是strong中的strong是选不了的

８.相邻兄弟选择器

两者有相同的父元素，可选择紧接在另一个元素后的元素，用于列表中居多，例如：li+li{}

<ul>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
</ul>

li+li{
    color: blue;
}

第二个和第三个会变成红色