在CSS中，" "和“#”;当声明一组样式时?

在为一个元素声明一组样式时，#和.之间有什么区别?在决定使用哪一种样式时，有什么语义在起作用?

318049 次浏览
小开

点号(.)表示类名称，而散列(#)表示具有特定id属性的元素。类将应用于任何带有该特定类装饰的元素，而#样式将只应用于具有该特定id的元素。

类名:

<style>
.class { ... }
</style>


<div class="class"></div>
<span class="class"></span>
<a href="..." class="class">...</a>

命名的元素:

<style>
#name { ... }
</style>


<div id="name"></div>
小开
最佳答案

是的，他们是不同的……

#是一个id选择器类型，用于指向具有唯一id的单特定元素，但是。是一个类选择器，用于用特定的类定位多个元素。换句话说:

  • #foo {}将对用属性id="foo"声明的单元素设置样式
  • .foo {}将使用属性class="foo"对所有元素进行样式化(你也可以将多个类分配给一个元素，只是用空格分隔它们，例如class="foo bar")

典型的使用

一般来说，你使用#样式化一些你知道只会出现一次的东西，例如，像边栏，横幅区域等高级布局。

类用于样式重复的地方，例如，你为错误消息头设置了特殊形式的头，你可以创建一个样式h1.error {}，它只适用于<h1 class="error">

特异性

选择器的另一个不同之处在于它们的特异性——id选择器被认为比类选择器更具体。这意味着在元素上的冲突样式中，使用较特定的选择器定义的样式将覆盖较不特定的选择器。例如，给定<div id="sidebar" class="box">用于#sidebar的任何规则，覆盖用于.box的冲突规则

了解更多关于CSS选择器的知识

请参阅Selectutorial以获得更多关于CSS选择器的入门知识-它们非常强大，如果你的概念只是“#用于div”，那么你最好仔细阅读如何更有效地使用CSS。

编辑:看起来Selectutorial可能已经去了天上的大网站，所以试试这个归档链接代替。

小开

#表示它匹配元素的id。.表示类名:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>




#myRedText {
color: red;
}
.blueText {
color: blue;
}

注意，在HTML文档中id属性必须唯一，所以如果你有多个元素需要特定的样式，你应该使用类名。

小开
#是一个id选择器。它只匹配具有匹配id的元素。 Next样式规则将匹配id属性值为"green"的元素:

#green {color: green}

更多信息请参见http://www.w3schools.com/css/css_syntax.asp

小开

.class目标是以下元素:

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

#class目标是以下元素:

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

注意，id在整个文档中必须是唯一的，而任何数量的元素都可以共享一个类。

小开

对已经说过的内容做几个快速扩展…

id必须是唯一的，但是你可以使用相同的id使不同的样式更具体。

例如，给定这个HTML摘录:

<div id="sidebar">
<h2>Heading</h2>
<ul class="menu">
...
</ul>
</div>
<div id="content">
<h2>Heading</h2>
...
</div>
<div id="footer">
<ul class="menu">
...
</ul>
</div>

你可以应用不同的样式:

#sidebar h2
{ ... }


#sidebar .menu
{ ... }


#content h2
{ ... }


#footer .menu
{ ... }


还有一件有用的事情需要知道:你可以在一个元素上有多个类，通过空格分隔它们…

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

它允许你在.menu中使用特定的样式使用.main.menu和.sub.menu

.menu
{ ... }


.main.menu
{ ... }


.other.menu
{ ... }
小开

同样值得注意的是，在级联中，id (#)选择器比b (.)选择器更具体的。因此，id语句中的规则将覆盖class语句中的规则。

例如，如果下面两个语句都是:

.headline {
color:red;
font-size: 3em;
}


#specials {
color:blue;
font-style: italic;
}

应用于相同的HTML元素:

<h1 id="specials" class="headline">Today's Specials</h1>

颜色:蓝色规则将覆盖颜色:红色规则。

小开

就像几乎所有人都已经说过的那样:

句点(.)表示类，散列(#)表示ID。

两者的根本区别在于，您可以在页面上反复重用类，而ID只能使用一次。当然，前提是您坚持WC3标准。

如果您有多个具有相同ID的元素，页面仍然会呈现，但是如果/当您尝试通过使用ID调用这些元素来动态更新这些元素时，您将遇到问题，因为它们不是唯一的。

注意ID属性将取代类属性也是有用的。

小开
下面是我解释规则.style和#style是矩阵的一部分的方法。 如果不是在正确的顺序，他们可以覆盖彼此，或引起冲突

这是一条线。

矩阵

#style 0,0,1,0 id


.style 0,1,0,0 class

如果你想覆盖这两个，你可以使用<style></style>有一个矩阵级别或1,0,0,0. @media查询将覆盖上面的所有内容… 我不确定这一点，但我认为ID选择器#只能在一个页面中使用一次


提交答案