Question

我是Web Design的新手，现在正在学习HTML / CSS。这个问题困扰了我好几天：

如果您有CSS规则：

<p class="example">This is a sample paragraph</p>

然后，这些选择器之间有什么区别：

.example {...}
p.example {...}

当我们编写选择器 - .example{...}时，此选择器中的样式将应用于段落中的每个元素，无论是文本，图片，<a>，<b>，{{1等等。

但是如果我们写<em>，那么即使这样，所有样式也会应用于此选择器中的每个元素。

我能想到的唯一区别似乎是句法。 p.example{...}指的是类名为p.example{...}的所有<p>元素。同时，example会选择任何类名为.example{...}的元素。

道歉，如果问题没有意义，但我想不出一个更好的方式说出我的意思。

我在这里也有一个例子，以防万一：

example

在此示例中，仅使用<!doctype html> <html> <head> <title>Gaps between cells</title> <style type="text/css"> table { display: inline-block; } td { background-color: #08d; padding: 15px; border: 2px solid #000; } table.one { border-spacing: 5px 15px; } table.two { border-collapse: collapse; } </style> </head> <body> <table class="one"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> <table class="two"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </body> </html>和table.one{...}替换table.two{...}和.one{...}似乎没有任何区别。为什么？

Answer 1

.classname获取此类的所有元素。

<style>
    .classname {color: red;}
</style>

<p class=classname>This will be red</p>
<span class=classname>This will be red</span>
<p>This will be black</p>

https://jsfiddle.net/cgsj4znn/

p.classname只使用此类的段落。

<style>
    p.classname {color: red;}
</style>

<p class=classname>This will be red</p>
<span class=classname>This will be black</span>
<p>This will be black</p>

https://jsfiddle.net/cgsj4znn/1/

Answer 2

它不是那个，它比你的想法更重要。您理解的是正确的，因此当您使用.example时，它会将样式应用于所有具有.element类

的元素

当您使用p.element之类的选择器时，它会定位p class .element的所有p.example个标记

但不仅仅是这个，现在这就是特殊性的来源。所以当你写.example被认为更具体而不仅仅是使用font-family所以你应该关注一般将你的选择器声明为最不具体的做法。有关更多信息，您应该了解CSS中的一个名为CSS Specificity的概念。

Here's a decent article为您详细解释了CSS特异性。

正如你所说，你刚刚进入CSS，得到一个拇指规则，在你宣布类和id之前，你应该特别声明这些标签的一般规则集，这样你就不必提了对于每一个元素。

例如，您可以在CSS的font-size标记声明中声明color，body，git push origin HEAD等，以便大多数标记继承它。这将阻止您为每个元素重新声明相同的内容。

Answer 3

这不是一个问题，因为你猜测自己。是的，你推测正确。

这是css 101顺便说一下，如果您在理解（或不理解）这个问题时可能会考虑去网上课程，例如

http://www.codecademy.com/tracks/web

Answer 4

正如Bhojendra Nepal所指出的那样 - ＆gt;你已经回答了自己。

我能想到的唯一区别似乎是句法。 p.example{...}指的是具有类名的所有<p>元素例子。同时，.example{...}选择任何具有该元素的元素示例的类名。

回答有关您的示例的问题：

你的CSS中有table.one，html中有<table class="one"> 当然，如果你从你的CSS中移除table，它就不会有任何区别，因为你会说'＃34;嘿，适用于所有第一类的对象＆＃34; （所以它会再次瞄准你的桌子）但是，如果您更改了css中的table而不是将其删除（例如将其更改为form.one），那么css将不再适用于您的桌子，因为您说＆＃39;因为您说＃＆＃39} 34，嘿，只需申请第一课的表格＆＃34;

element.value {}和.value {}之间的区别，其中value是CSS中的类名

4 个答案: