选择器的分组

被分组的选择器就可以分享相同的声明，需要分组的选择器用逗号分开。

h1,h2,h3,h4,h5,h6 { color: green; }

继承及其问题

根据 CSS，子元素从父元素继承属性。如下，body下面的所有子元素（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）将继承body的字体，但如果希望段落的字体是 Times。

则需要创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body { font-family: Verdana, sans-serif; } p { font-family: Times, "Times New Roman", serif; }

CSS 派生选择器

在 CSS1 中，通过依据元素在其位置的上下文关系来定义样式，使标记更加简洁。在 CSS2 中，它们称为派生选择器。

比方 希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong { font-style: italic; font-weight: normal; } <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

CSS 后代选择器（包含选择器）-空格

根据上下文选择元素。后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

h1 em {color:red;}/*会把作为 h1 元素后代的 em 元素的文本变为 红色。*/

CSS 子元素选择器-大于号（子结合符）

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器.

h1 > strong {color:red;} /*希望选择只作为 h1 元素子元素的 strong 元素。选择作为 h1 元素子元素的所有 strong 元素*/

结合后代选择器和子选择器

table.company td > p

选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

CSS 相邻兄弟选择器-加号（+）

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}/*选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素*/

注意：用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

CSS 伪类

用于向某些选择器添加特殊的效果

CSS 伪类  https://www.w3school.com.cn/css/css_pseudo_classes.asp