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;
}

参考

？

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的问题的最后一部分。

这是对添加了的{{1}}代码的引用，class="one"

该CSS仅适用于添加了...类的代码（如上所述）。

专家额外......

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

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

并为此添加CSS样式，您可以放入（在CSS中）;

<p id="my-first-id"></p>

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

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

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>

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

#awesome-text-box =＆gt; <div id="awesome-text-box"></div> =＆gt; ID
.btn.btn-style-1 =＆gt;  =＆gt;链接课程
p > span =＆gt;  =＆gt;子
p span =＆gt; <a></a> =＆gt;后裔（以下任何内容）
p + span =＆gt;  =＆gt;同级

Answer 3

A'。'指的是一个类，而'＃'指的是一个id。什么时候都不是'。'或者使用'＃'，CSS将样式应用于HTML对象。因此，对于 p .one 和 p .two ，CSS将应用于'p'对象中存在的'.one'和'.two'类。

更详细的例子;

<p class = "one">This text will have the CSS of "p .one"</p>
<p class = "two">This text will have the CSS of "p .two"</p>

Answer 4

。是指一堂课。您可以使用HTML

调用该CSS类

示例

<span class="awesome-text-box"> ABCD </span>

和P表示您可以调用的HTML中的标记

<p class="one"> ABCD </p>

参考 -

http://www.w3schools.com/css/css_selectors.asp

Answer 5

点符号用于类，没有点不起作用。像div，p这样的选择器名称不需要点表示法。并使用hash（＃）作为id为

的选择器

实施例 -

<div id="foo">foo bar</div>
<div class="bar">foo bar</div>

#foo{} /* selects foo with id foo */
.bar{} /* selects foo with class bar */
div{} /* selects the div */

Answer 6

这里.是类选择器。这意味着将样式应用于具有类awesome-text-box的所有元素，即

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

虽然没有圆点，但它是第二个例子中提到的标签名称p这里p是标签：

<p>Some text</p>

同样地p.one将样式应用于具有类p的所有one标记。即，

<p class="one">Some text</p>

CSS Dot符号命名约定

6 个答案: