CSS 选择器中的 -- 是什么

Question

我不是最擅长 CSS，遇到了一段让我感到困惑的代码。

.grid-product__title.grid-product__title--body:hover {
  text-decoration: underline;
}

我查看了 MDN，它通常声明一个可重用的属性，比如变量？

但是如果它在选择器中意味着什么？它可能是.grid-product__title.grid-product__title 的父选择器，并在选择父主体时给它一个下划线或什么？我很困惑

非常感谢:)

Answer 1

这对 CSS 来说并不特殊，它只是 BEM (Block, Element, Modifier) naming methodology 的一部分。

• grid-product 是块
• title 是元素
• body 是修饰符（尽管老实说，这可能是一个经过改编的“修饰符”）。