Question

过去几天我一直在学习CSS，并且总是想知道在声明标题时.或#的不同之处。例如：

.test
{
  some stuff here
}

#test
{
  Some stuff here
}

.和#之间的主要区别是什么？

Answer 1

#是ID选择器。 .是一个类选择器。这就像比较精密镊子和铲子一样。

页面上只能有一个具有给定ID的元素，使#选择器的优先级高于类。

Answer 2

. - ＆gt;这指的是一个班级的CSS 它用于为在该名称中设置类的元素指定css。 多个元素可以具有相同的类

例如

<div class='xyz'></div>
<div class='xyz'></div>
<div class='xyz'></div>

写作

.xyz
{
width:100px;
height:100px;
}

我们可以为所有div设置公共宽度

#指的是ID ID是唯一的 只有一个元素可以在html页面中具有ID 它用于应用与一个特定元素有关的css属性例如

<div id="div1" class='xyz'></div>
<div id="div2" class='xyz'></div>
<div class='xyz'></div>

写作

.xyz
{
width:100px;
height:100px;
}


#div1
{
width:200px;
}

我们将div1宽度设为200！ #的CSS属性优先于.

＆GT; 即# css将覆盖. Css

看看这个例子jsfiddle http://jsfiddle.net/rbyKx/

Answer 3

.为class，#为id

ID是唯一的

每个元素只能有一个ID

每个页面只能有一个具有该ID的元素

类不是唯一的

您可以在多个元素上使用相同的类。

您可以在同一元素上使用多个类。

这就是主要差异

你可以举一个BAR CODE和SERIAL NUMBER的例子

产品{class}的条形码相同和序列号对于产品的每个实例{id}

都不同

Answer 4

.test {...}选择指定类的元素。 #test {...}选择具有指定ID的元素。（永远不应该有多个具有给定ID的元素）

Answer 5

.test将应用于包含类test的元素，＃test将应用于包含id test

的元素

Answer 6

这适用于CSS，并不是特定于CSS3。

使用#将按id属性选择HTML元素（请注意，id在页面上必须是唯一的。）

使用.将按class属性选择HTML元素，并将选择其列表包含CSS中指定的类的元素。

CSS选择器还有一个优先级“得分”来确定哪些规则胜过其他规则。由于id是唯一的，因此它们的分数远高于class选择器，因此优先级更高。

您可以阅读有关CSS选择器here的更多信息。

Answer 7

这只是普通的CSS而不是CSS3。

.test表示定位具有类 test的任何元素，例如

<div class="test">I am targeted</div>
<div class="testnot">I am not targeted</div>

#test表示具有 id test的元素，例如

<div id="test">I am targeted</div>
<div id="testnot">I am not targeted</div>

ID必须是唯一的，许多元素可以包含相同的类。

Answer 8

.用于类，#用于ID。

所以

您在.test { }规则中定义的样式将适用于类 _ test _的任何元素，例如：

<div class="test"></div>

您在#test { }规则中定义的样式将应用于测试作为 id 的元素。例如：

<div id="test"></div>

Answer 9

Dot用于类，Hash（＃）用于ID。定义类以设置各种节元素的样式，并且可以多次使用。

ID主要用于定义页面的特定部分。它们只能使用一次。

类示例如果我想设置页面上每个段落的字体大小，您可以使用类来执行以下操作：

p.font-size{
        font-size:12px;
 }

Id示例：如果我必须更改特定参数的字体大小，我可以使用以下方法：

#Size {
font-size:10px;
}

而不是以这种方式在html中使用

  <p id="Size">your para</p>

此处的id将覆盖css类

中定义的任何样式

之间的区别。和＃在CSS中

9 个答案:

ID是唯一的

类不是唯一的