前面所有的选择器都是只涉及到一个元素，组合选择器至少涉及到两个元素。

多个选择器公用一份选择器代码，这样可以减少代码量，写法简略。

示例：

del,ins {
    text-decoration: none;
}

code[class*="language-"],
pre[class*="language-"] {
	color: white;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
}

后代选择器。匹配selector1匹配到的HTML元素的后代中符合selector2要求的那些元素。

示例：

.panel-body pre {
    margin-left: 32px;
    margin-top: 20px;
    padding: 10px;
    background-color: #2e0c24;
    font-size: 16px;
    color: white;
    max-height: 400px;
    overflow: scroll;
}

直接后代选择器。匹配selector1匹配到的HTML元素的直接后代中符合selector2要求的那些元素。

示例：

.panel-body > img {
    margin-left: 32px;
    margin-top: 20px;
    max-width: 90%;
}

毗邻元素选择器。匹配selector1匹配到的HTML元素的紧随其后的那个元素也正好匹配selector2要求的那个元素。

示例：

div[class="h1"] + p {
    margin-left: 32px;
    margin-top: 0px;
    max-width: 90%;
}

同级元素选择器。匹配selector1匹配到的HTML元素的后面的那些元素中也正好符合selector2要求的那些元素。

示例：

div[class="h1"] ~ p {
    margin-left: 32px;
    margin-top: 0px;
    max-width: 90%;
}