html/css 带有多个点的元素是什么意思

Question

如果我想应用多个 css 类，我使用 <div class = "c1 c2 c2">
我正在看一些代码。 <div class = "c1.c2.c3"> 是什么意思？

Answer 1

您拥有的代码是正确的，但是您不需要第二个 <div> 元素 (<div class='c1.c2.c3'></div>) 中的点。 （除非您实际上有一个明确命名为 c1.c2.c3 的元素，否则这可能会导致 CSS 样式声明出现一些问题，除非您转义前导斜杠）

圆点指的是 CSS 样式规则，表示一个元素有多个类，或者在本例中为 c1、c2 和 c3 类。

.c1.c2.c3
{
    //Styles an element that has classes c1, c2 and c3
} 

.c1.c2
{
    //Styles an element that has classes c1 and c2
}

而使用间距，它细化了范围：

.c1 .c2 .c3
{
    //Styles an element that has class c3 within an element c2, 
    //within an element c1.
}

Example of both cases

Answer 2

<div class = "c1.c2.c3"> 就是它的样子：这个 div 元素的类名是c1.c2.c3。它的 CSS 选择器如下所示：

.c1\.c2\.c3 {
    // styles here
}

这与<div class="c1 c2 c3"> 的 CSS 选择器非常不同，看起来像这样：

.c1.c2.c3 {
    // styles here
}