CSS Dot符号命名约定

Question

我开始学习CSS了.

在浏览w3schools的教程时.

我意识到一些例子开始于

.awesome-text-box{}

是否有不同之处

.awesome-text-box {} and awesome-text-box{}

没有点？

点符号在这里意味着什么

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p referes

？

Answer 1

css中的一个点用于所谓的类.

它们几乎可以调用任何东西,例如在CSS中你可以创建一个类并为它添加样式(在这种情况下,我将背景设置为黑色);

.my-first-class {
    background-color: #000;
    ...
}

要将此类应用于HTML元素,您将执行以下操作

<body class="my-first-class">
    ...
</body>

这意味着页面的主体会变黑.

现在,您可以为CSS样式创建类,或者您可以直接引用HTML元素,例如(再次使用CSS);

body {
    background-color: #000;
}

将直接引用<body>页面上的元素并再次执行相同的操作.

两者之间的主要区别是CSS类是可重用的.相比之下,直接引用HTML标记会影响页面上的所有标记(相同),例如(再次使用CSS);

body {
    background-color: #000;
}

.my-first-class {
    background-color: #FFF;
}

现在是一些HTML;

<body>
    <p class="my-first-class">This is the first line</p>
    <p class="my-first-class">This is the second line</p>
</body>

这将产生一个黑色页面,其中有2个带有文本的白色框(试一试!)

现在关于p.one {...}CSS的最后一部分问题.

这是对添加到其中的标记的引用class="one",...

CSS只适用于添加了one类的标记(如上所述).

专家额外......

还有一个选择器类型,它被称为ID(我个人在做CSS样式时不会使用这些,但有些人也喜欢,我不知道为什么......)

就像一个类,你可以在HTML元素上有一个id; 

并为此添加CSS样式,你会把(在CSS中);

#my-first-id {
    ...
}

并且会为添加了该ID的所有元素设置样式.

希望这有助于回答所有部分,再次询问您是否需要更好的解释:)

尽管通常倾向于使用类来选择用于对id进行样式设置的元素，但这是基于可重用性的前提。但是id（单个元素的唯一标识符）是HTML不可或缺的，并且[在HTML文档中有很多用途]（http://stackoverflow.com/questions/13001236/why-should-one-add-id-to-their -html-tags＃13001519）。因此，如果有可用的样式，则可以合理地利用它们进行样式化。 (2认同)

Answer 2

点表示选择器是一个类.因此,它会选择页面中的元素:

.awesome-text-box {

}
<div class="awesome-text-box"></div>

而没有点表示元素名称.如:

div {

}
<div></div>

在您给出的另一个示例中,点符号使用chaining此符号可以选择具有多个条件的元素.在你的例子中:

p.one {

}
// Will find
<p class="one"></p>
// However it will not find
<div class="one"></div>

虽然我在这里,但我也可以列出其他常见的选择器: