选择器的用处就是告知浏览器，我这一大堆的样式要用在哪些元素 选择器很重要，学好了，可以减少很多CSS代码，不用像以前一样，一大堆类选择器。 以下为了方便查看CSS代码，我采用内联样式的方法，但在实际开发中，建议用外联样式，这有利于页面的性能优化。 id选择器 id选择器，要在标签添加id属性和其值，css根据id来赋予元素样式。 在一个网页文件中，id名不能重复，如下代码有个id="div"，就不能再来一个id="div"了，但可以是其他的值，Id名就像身份证一样，每个只有一个，并且不能重复。 类选择器 这个是利用html元素的class属性，一个元素只能有一个class属性，但class属性可以有多个值，而且在一个html文件中，类名是可以重复，它就像衣服一样，给一些元素穿上同样的衣服。

背景为红色

如果一个元素有多个类要怎么写?

背景为粉色

类名与id名的合法值 就像编程语言的变量有合法的标识符一样，这里的id和class也有合法的值 id名和类名的值由，英文大小写字母和数字，还有下划线 _ ，以及中划线 - 组成，开头不能是数字 为了见名之意，建议采用驼峰标识，或以下划线或中划线来分割单词 比如class="bg-color" 因为最常用的就是类选择器，所以也拥有一些命名规范，比如BEM，其实这玩意我也不太了解啊，因为我也没有注意这种命名的问题，特别是学了vue的组件化开发后。 但是就针对一开始学的话，CSS一大堆类名，要管理起来确实不容易，有时候出bug找个类名都难找，而且类名一多，就开始乱起了，就很麻烦，我以前用的好像是OOCSS的那一套，不过OOCSS需要对CSS样式有个比较全面的了解，所以，后面再说。 快捷方式：在sublime_text这个编辑器有个关于id和类选择器的快捷方式 div#name按下tab键会变成 div.div按下tab键会变成 标签选择器 这个就是利用标签名了，被指定的所有标签都会有相同的样式

p背景为绿色，字体粉色

p背景为绿色，字体粉色

群组选择器 多个选择器的组合，只要是在这个组的都有同样的样式

p背景为粉色，字体为蓝

p背景为粉色，字体为蓝

• 列表1
• 列表2
• 列表3
• 列表4

看到这可能会有疑惑，会什么明明没有指定li标签的字体颜色，为何它也变色了，这就是CSS属性的继承了，比如字体颜色是可以继承的，老爹有什么颜色，儿子就是什么颜色的，除非儿子重新定义自己的颜色。

p背景为粉色，字体为蓝

p背景为粉色，字体为蓝

• 列表1
• 列表2
• 列表3
• 列表4

既然字体颜色可以继承，那么其实要让所有的字体颜色一样，其实只要在body上设置就行了。 后代选择器 下面这CSS代码的意思是，我这个叫bg的类名，它的后代，不管是儿子还是孙子，还什么，只要它叫p，都用这个样式。 后代选择器并不是只能弄两级，可以有很多层级 上面这段代码，就是类名bg中的p里面的span套用这个样式 子选择器 它和后代选择器不同，它就是选择它儿子的，至于后代不关它的事 中间两行并没有相应的样式，因为它们不是类名bg的儿子，它们是孙子。 但可以这样 这样就是div标签的儿子们，名为p的标签就用这些样式，所以全部都有样式了。 兄弟选择器 这个只能选择某个选择器的第一个弟弟元素

我是类名bg的哥哥

我是类名bg的哥哥

我是类名bg的第一个弟弟

我是类名bg的第二个弟弟

那把.bg + p换成这样 .bg + p + p会是什么结果

我是类名bg的哥哥

我是类名bg的哥哥

我是类名bg的第一个弟弟

我是类名bg的第二个弟弟

我是类名bg的第三个弟弟

这样子就是选择类名bg的一个弟弟的一个弟弟了 弟弟选择器 这个是自己命名的，它选择某元素的所有弟弟，不再是第一个弟弟了

p

p

p

p

p

属性选择器 第一种 只要标签上有某个指定属性的就用这些样式 标签1 标签2 标签3 第二种 标签1 标签2 标签3 第三种 只要我这个属性的值有我指定的字段，就套用这些样式 标签1 标签2 标签3 标签4 再来看另一个 标签1 标签2 标签3 标签4 第四种 选择属性值以某个字段开头的元素 这里稍微有点问题，这个值必须是单词的形式，如果是句子是不行的 title="this-is"这种是可行的 title="this"`这种也是可行的 title="this1s" 这是不行的 title="this 1s"` 这也是不行的 标签1 标签2 标签3 标签4 标签5 第五种 通过正则来匹配值的选择器 [属性^=值] [href^="https"] 值以https开头的 [属性$=值] [href$="com"] 值以com结尾的 [属性*=值] [href*="baidu"] 值baidu这个字符串 标签1 标签2 标签3 标签4 标签5 伪元素选择器 为什么叫伪元素选择器，这种命名的概念问题不要纠结，主要我也不清楚啊，还是看都有哪些作用吧 first-line、first-letter、before和after first-line 设置文本中第一行的样式 first-letter设置文本中第一个字的样式 before在某个元素前插入内容 after在某个元素后插入内容

文本中的第一行
文本中的第二行

天生我才必有用

在前面插入内容

在后面插入内容

root、not、empty和target选择器 root选择器绑定页面的根元素，也就是html元素 一般可以在这设置一些全局的样式，比如重新设置字体的默认颜色，大小，字体样式，比如楷体，宋体之类的 not选择器，用于排除哪个元素不使用该样式，写法为 选择器 *:not(排除的选择)