#和。在为一个元素声明一组样式时,在决定使用哪一种样式时使用的语义是什么?
当前回答
下面是我解释规则的方法。style和#style是矩阵的一部分。 如果没有正确的顺序,它们就会凌驾于对方之上,或者引起冲突。
这是一条线。
矩阵
#style 0,0,1,0 id
.style 0,1,0,0 class
如果你想覆盖这两个,你可以使用<style></style>女巫有一个矩阵级别或1,0,0,0。 @media查询将覆盖上面的所有内容… 我不确定,但我认为ID选择器#只能在一个页面中使用一次。
其他回答
同样值得注意的是,在级联中,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的元素。
类名:
<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只能使用一次。当然,前提是您坚持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选择器#只能在一个页面中使用一次。
是的,他们是不同的……
#是一个id选择器,用于瞄准具有唯一id的单个特定元素,但是。是一个类选择器,用于针对具有特定类的多个元素。换句话说:
#foo{}将使用id="foo"属性对单个元素进行样式化 .foo{}将使用class="foo"属性对所有元素进行样式化(你也可以将多个类分配给一个元素,只是用空格分隔它们,例如class="foo bar")
典型的使用
一般来说,你使用#样式化一些你知道只会出现一次的东西,例如,像边栏,横幅区域等高级布局。
类用于样式重复的地方,例如,你为错误消息设置了一个特殊形式的头,你可以创建一个样式h1。错误{},只适用于<h1 class=" Error ">
特异性
选择器的另一个不同之处在于它们的特异性——id选择器被认为比类选择器更具体。这意味着当元素上的样式发生冲突时,使用较特定的选择器定义的样式将覆盖较不特定的选择器。例如,给定<div id="sidebar" class="box"> #sidebar的任意规则,覆盖.box的冲突规则
了解更多关于CSS选择器的知识
查看Selectutorial了解更多关于CSS选择器的入门知识——它们非常强大,如果你的概念只是“#用于div”,那么你最好仔细阅读一下如何更有效地使用CSS。
编辑:看起来Selectutorial可能已经去了天上的大网站,所以试试这个存档链接。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
- 我怎么能检查html元素,从DOM消失失去焦点?
- 谷歌Chrome表单自动填充和它的黄色背景