元素（标签）选择器

在上篇文章里，所用的例子都是元素选择器，就是用html元素标签名来作为selector，设置各种属性来装扮这些html元素标签，上例子

给html, body设置css属性

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	background: #E2B29F;
	display: flex;
	justify-content: center;
	align-items: center;
}
复制代码

给div设置字体颜色

这种方法简单方便，但也存在一些问题，我们知道一个html文件里会存在很多相同的标签，如果想让这些相同的标签表现的不一样，用这个就不行了， 这个会让html文件里所有一样的标签都统一渲染成一个样式。

class选择器（类选择器）

解决以上问题，就衍生出了其他类型的选择器，比如这个class选择器
每个html标签可以设置属性class，例如
<div class=”me”></div>
<div class=”you”></div>
<div class=”he”></div>
css选择器通过给这个class属性值(me, you, he)设置不同的属性， 那这三个div就会有各自的样子。

css选择器的格式：

以  . （class选择符前缀）加上对应的class value组合成选择器的元素符号

详细用法

.me{color:red;}
.you{color:blue;}
.he{color:green;}
复制代码

id选择器

和class选择器一样，也是通过标签的属性来设置样式， html标签可以设置id属性 ，一般这个id是全局唯一的， 在做元素定位的时候会经常用到，因为全局唯一，很容易找到
注：因为id的唯一性，带来的好处是样式唯一，但同时的缺点就是复用性低， 在具体的实践中可根据自己的实际情况来选择使用哪种选择器

id选择器的格式

以  # （id选择符前缀）加上对应的id value组合成选择器的元素符号

详细用法

#address1{color:red;}
#address2{color:blue;}
#address3{color:green;}
复制代码

前面说过id是全局唯一的，这只是大家编码的约定，但有些调皮鬼总喜欢打破约定，你看我，实际中最好别这样

还有 id属性和class属性不要用数字开头，在某些浏览器中会出问题

不信，我给你试一下，看，没生效吧

把数字去掉

属性选择器

html标签可以设置class, id这两个特殊的属性外，还可以设置其他的属性， 当一个html元素没有class和id属性，怎么用其他的属性来设置样式呢

属性选择器格式

标签名[被选元素的属性条件]
这个属性选择器花样比较多，来看具体用法吧

详细用法

1. 标签名[属性]

先看一个例子，设置页面上所有含有id属性的div元素

div[id]{ 
color:red; 
}
复制代码

这个属性可以是标签的任何属性，包括id, class

2.标签名[属性=value]

这个在第一个的基础上，又进一步细化了，还是看例子吧

3. 标签名[属性~=value]

这个格式是不是有点正则的味道了，这个针对的是这个属性里有很多属性值（属性值之间用空格隔开）其中一个属性是这个指定的value， 这个多用来class, 有时候class的值不止一个，还是看例子

给一个id设置了 country， cindy, phone-123456三个值

学这个的时候，我以为是一个属性值里包含这个字符串，
看这个错误的示范，想这样就得用div[id*=”cindy”],后面会介绍
我给这个id设置一个属性，这个样式就没生效

4. 标签名[属性^=value]（伪正则选择器）

这个就是针对一个属性值里的字符串了，以value开头的属性，上例子

5. 标签名[属性|=value]（伪正则选择器）

这个也是针对一个属性值，意思是属性值等于value或以value-（不要忘记这个‘-’）为开头， 上例子

6. 标签名[属性$=value]（伪正则选择器）

这个也是针对一个属性值，意思是属性值以value为结尾， 上例子

7.标签名[属性*=value]（伪正则选择器）

这个也是针对一个属性值，意思是属性值包含value， 上例子

8. *[属性条件]

这个用*（通配符）来代表任意标签名，结合以上的各种属性条件，碰撞出更多用法，上例子

后代选择器

后代选择器​： 选中某个父级下对应的​所有子级​，并针对该子级设置CSS样式。

​后代标签​只要是当前标签里面的​任意一个标签​都行不一定非要亲儿子

• 后代选择器设置的CSS样式​不会影响​到父级。

• 父级和子级之间需要用​空格隔开​ 。

• 后代选择器可以存在​多层级父级​，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。

格式

爷爷（标签、属性） 爸爸（标签、属性） 儿子（标签、属性） 孙子（标签、属性） {属性：属性值；} （多层级）
爷爷（标签、属性） 儿子（标签、属性） 孙子（标签、属性） {属性：属性值；} （每级之间不一定要是亲儿子）
这个要自己试才有意思

用法

还是拿例子说话

子元素选择器

子元素选择器​： 子元素选择器与后代选择器较为类似。相对于后代选择器，子元素选择器所涉及的范围会更小。

• ​后代选择器​可以跨层级影响，而​子元素选择器​要求父元素和子元素一定为​上下级​关系，中间如果隔着其他元素则会失效。

格式

父亲>儿子>孙子 {属性：属性值}

用法

自己动手试试吧

相邻选择器

有父亲儿子，就有兄弟姐妹（涉及的都是同级）

格式

哥哥（标签、属性+弟弟（标签、属性）{属性：属性值；}

用法

选择器分组

当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而造成不必要的冗余。

格式

通过​ , （逗号）​将需要复用同一套样式的多个元素进行分隔
元素1， 元素2， 元素3{属性：属性值；}

用法