[分享]css两个类名之间无空格

大多数我们写 CSS 的时候都是使用两个类名之间加上空格，例如： .container .box { / CSS代码 / } 但你可能会发现在一些开源的 CSS 框架中，比如 Bootstrap，它们...

大多数我们写 CSS 的时候都是使用两个类名之间加上空格，例如：

 .container .box {
    /* CSS代码 */
  } 

但你可能会发现在一些开源的 CSS 框架中，比如 Bootstrap，它们会使用两个类名之间无空格的写法，例如：

 .container.box {
    /* CSS代码 */
  } 

那么，这两种写法有什么区别呢？

首先，两个类名之间加上空格的写法是表示选择了类名为 box 的元素，该元素必须是选中类名为 container 的元素的后代元素。而两个类名之间无空格的写法，则表示选中同时被这两个类名所定义的元素，这些元素可能是同级元素或者父子元素。

这也就是两者之间的区别，但在实际应用中两个类名之间加上空格的写法更为常见，因为它能更清晰地表达出父子元素之间的关系。

在开发时，根据实际需求选择合适的方式来写 CSS 是最重要的。我们应该在代码中接受两种写法，并且根据具体需求来进行选择。