后代选择器（descendant selector）又称为包含选择器
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符
通常写法为：标签名 标签名{样式....} 如下
<style> h1 em{color:red;} </style> <body> <h1>This is a<em> important </em> heading </h1> </body>运行结果
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的
如
<style>
ul em{color: green;}
</style>
<body>
<ul>
<li>coffee</li>
<li><em>tea</em></li>
<li>milk</li>
</ul>
</body>
结果：
分组选择器写法与后代选择器非常类似
通常写法为：标签名,标签名{样式....} 如下
<style>
h2,h3,h4{
text-align: left;
color: green;
}
</style>
<body>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
</body>
结果
将选择器(元素标签)放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式将应用到这三个选择器所引用的元素。逗号告诉浏览器，规则中包含三个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同，就会变成后代选择器了。
多类选择器的写法与后代选择器也十分相似，容易混淆
通常写法为：类名 类名{样式....} 如下
<style>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important urgent warning">This paragraph is a very important warning.</p>
</body>
多类选择具有类似叠加样式的作用，当类选择器1类选择器2都定义了样式，则多类选择器：类选择器1 类选择器2{样式...}会将之前已定义的样式加入多类选择器中
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败
因此background:silver;不会给前面两个p标签添加样式
标签：样式,标签,后代,important,分组,选择器,类名 From： https://www.cnblogs.com/xf5651/p/17817345.html