1 css后代选择器语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。2、css子元素选择器语法：h1>em{color:red;} 表示的是从h1开始里面的第一层em元素变成红色，h1为祖先，em为儿子，就像世袭制一样，只能传给儿子，孙子和其他堂亲都不行
@ 如何理解CSS类名语义化？
偶是一名前端，看了这个问题并且看了你说的这篇文章，偶来说说偶的观点！
首先大家谈谈CSS的类名语义化，偶个人觉得这就是一个命名规范的问题！
如上图，这是一个普通的页面，大家可以根据页面的功能划分为header、nav、list、footer这个四个部分，然后再对细节部分做划分！如果你对CSS做了模块化，可以这样命名class：
header-x1-x2
nav-x1-x2
list-x1-x2
footer-x1-x2
文件夹有几级，名字可以用横线拼接，当然也可以是驼峰法！
这样的好处非常明显，维护方便，查找样式更方便，但是看见‘语义化’这三个字你就应该感觉到它很业务，它可以快速适应业务迭代，对于新人的学习成本非常小，大家在浏览器中一眼就能识别这个样式在哪个文件中，根本无需sourceMap！
再来说说你说的这篇文章Challenging CSS Best Practices，直接用文中例子：
特点很明显，对样式的作用切割的很细致，几乎一个类名包含一个样式，而且命名也是根据样式的作用来取的！这样的优点是：复用性强，冗余代码非常少，类名很少发生级联！
对比两种开发css规范（已经超出了类名的命名规范的范畴），你可以发现：
1、语义化适用于很业务的场景，开发者无论新人还是老人都能信手拈来，开发成本和维护成本小，但是一个class具体包含的样式呈现不受控制
2、对于UI框架和组件类的模板很适用于第二种方案，但是对开发者的能力要求会更高，可能开发前要制定各种各样的base class，而且还要牢记于心
一句话，还是要看自己的业务场景进行技术选型！
喜欢偶的回答就关注偶吧，有问题可以发表评论，大家一起学习，共同成长！
@ 用什么表示子代选择器？
CSS3中的关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器由符号连接，兄弟选择器由符号“+”和“~”连接，具体如下所示。
（1）关系选择器
例如： h1>strong
说明：表示选择嵌套在h1标记的子标记strong。
（2）临近兄弟选择器
例如： h2+p
说明：表示选择h2标记后紧邻的第一个兄弟标记p。
（3）普通兄弟选择器
例如：p~h2
说明：表示选择p标记所有的h2兄弟标记
@ CSS的类选择器和id选择器各有什么优势？
ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。 ID也可以用来标识持久的结构性元素，例如主导航或内容区域。ID还可以用来标识一次性元素，例如某个链接或表单元素。一个ID只能应用于页面上的一个元素。
class同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
在实际开发中，要根据实际使用情况来决定是使用哪种样式。对于单一元素的在单一界面的展示样式可以推荐是用id来定位。多余多个界面公用，或者同一界面多个元素风格一致，样式统一使用class类要方便的多。
下面就是最简单的一个小例子：
展示效果：
