HTML元素可以通过类型、类、属性、伪状态或ID名称定义。您如何对它们进行分组将影响您如何使用它们进行自定义CSS选择器。
例如,如果您想对站点进行广泛的更改,那么您可以使用类型选择器。假设您想为站点上的每个span元素设置样式。然后使用类型选择器跨度{样式属性}。
要进行更详细的更改,您需要一个更特定的选择器。最具体的是ID选择器。下面让我们仔细看看这个选择器类型。
CSS ID选择器
CSS ID选择器使用HTML元素的ID属性来选择页面上唯一的元素。要在CSS中使用ID选择器,只需编写一个hashtag(#),然后是元素的ID。然后将您想要应用于元素的样式属性放在括号中。
下面是CSS中ID选择器的语法:
#idname{样式属性}
要正确使用CSS ID选择器,必须遵循一些规则。在我们看下面的规则之前,让我对下面的例子做一个重要的说明。
我会用W3Schools在线代码编辑器创建以下演示。您可以随意单击任何源代码链接来查看示例背后的完整代码片段,并尝试使用它们或创建您自己的代码片段。
我也会使用BootstrapCDN所以如果你点击查看代码,你会在
部分看到一个指向CSS样式表的链接和其他一些代码。然而,例子中的HTML和CSS也可以在HTML5网站上工作。所以如果你从头开始构建你的网站,而不是使用引导CSS框架,您可以简单地从部分删除链接和脚本。如何在CSS中使用ID
使用ID属性时要记住的第一个规则是,它必须包含至少一个字符,并且不能以数字开头。
假设我的网站上有多个h2s,每一个都标志着新篇章的开始。然后我可以给每个h2一个ID名。
以下HTML是正确的:
第一章< h2 id = " c " > < / h2 >
第二章< h2 id = " C2 " > < / h2 >
第3章< h2 id = " C3 " > < / h2 >
第四章< h2 id = " C4 " > < / h2 >
这是不正确的:
第一章< h2 id = " 1 " > < / h2 >
第二章< h2 id = " 2 " > < / h2 >
第3章< h2 id = " 3 " > < / h2 >
第四章< h2 id = " 4 " > < / h2 >
要记住的第二个规则是,如果给元素一个ID名,那么它在页面中必须是唯一的。这样,ID选择器只选择一个唯一的元素。
回到有多个h2s的例子,假设我想让每个h2s都有不同的风格,以便在新一章开始时给读者提供视觉上的提示。在这种情况下,我将给每个h2一个唯一的ID名,这样我就可以使用ID选择器对每个h2应用一组唯一的属性值。
以下HTML是正确的:
第一章< h2 id = " c " > < / h2 >
第二章< h2 id = " C2 " > < / h2 >
第3章< h2 id = " C3 " > < / h2 >
第四章< h2 id = " C4 " > < / h2 >
这是不正确的:
第一章< h2 id = " C4 " > < / h2 >
第二章< h2 id = " C4 " > < / h2 >
第3章< h2 id = " C4 " > < / h2 >
第四章< h2 id = " C4 " > < / h2 >
下面的CSS会更改字体大小每个h2的:
# C1 {
字体大小:18 px;
}
# C2 {
字体大小:20 px;
}
# C3 {
字体大小:22 px;
}
# C4 {
字体大小:24 px;
}
结果:
使用ID选择器时要记住的最后一个规则是,ID选择器的属性值必须与ID名称完全匹配。
使用上面例子中的HTML,下面的CSS是正确的。
# C1 {
字体大小:18 px;
}
# C2 {
字体大小:20 px;
}
# C3 {
字体大小:22 px;
}
# C4 {
字体大小:24 px;
}
这是不正确的:
# c1 {
字体大小:18 px;
}
# c2 {
字体大小:20 px;
}
# c3 {
字体大小:22 px;
}
# c4 {
字体大小:24 px;
}
如果我用小写的“c”来使用这个CSS,那么CSS ID选择器和它们各自的CSS规则就不会被应用。Bootstrap中的默认h2样式将被渲染,如下所示。
现在我们理解了什么是ID选择器以及如何在CSS中使用它,让我们确保理解CSS中class和ID之间的区别。
CSS Class vs ID
在CSS中,类用于对多个元素进行分组,而ID用于标识单个元素。因此,类选择器用于样式化同一个类中的多个HTML元素,而ID选择器用于样式化一个HTML元素。您可以通过它包含的句点(" . ")识别类选择器,并通过散列字符(" # ")识别ID选择器。
类选择器和ID选择器之间的另一个关键区别是特异性。CSS选择器具有不同级别的专一性,因此如果HTML元素被多个选择器作为目标,浏览器将应用具有更高专一性的选择器的CSS规则。
当比较类选择器和ID选择器时,ID选择器具有更高的特异性,因此更强大。(事实上,ID选择器非常强大,只有!重要的属性可以在CSS中覆盖它们。)这意味着,如果一个元素被ID选择器和类选择器作为目标,ID选择器的CSS样式将应用于类选择器的样式之上的元素。让我们看下面的一个例子来演示这个规则。
说我为我的引导网站创建按钮。Bootstrap CSS为按钮提供了预定义的样式,我将创建自定义的,所以我只从最基本的模板开始,如下所示。
. class="btn
在我的网站上,我想我的按钮元素是栗色的。在这种情况下,我将使用一个类选择器来定义按钮类下的所有元素,使其背景颜色为栗色(十六进制颜色代码#80000)和白色(#FFFFFF)。
HTML:
<按钮type = "按钮" class = " btn”>订阅> < /按钮
CSS:
.btn {
background - color: # 800000;
颜色:# FFFFFF;
}
结果:
但是假设我想让我主页上的订阅按钮更吸引眼球。然后,我可以使用ID选择器来定义ID为“首页”的按钮,使其具有深褐色的背景色和黑色的字体(#000000)。所有没有ID为“首页”的按钮仍然会遵循类选择器的CSS规则。
HTML:
<按钮type = "按钮" class = " btn”>订阅> < /按钮
CSS:
#{主页
background - color: #就;
颜色:# 000000;
}
.btn {
background - color: # 800000;
颜色:# FFFFFF;
}
结果:
使用CSS ID选择器进行详细更改
CSS选择器使您能够控制站点上HTML元素的外观。使用ID选择器,您可以通过针对页面上的单个元素来维护对定制过程和代码的细粒度控制。要使用这个选择器,您只需要HTML和CSS的基本知识。
最初发布于2020年5月25日上午7:00:00,更新于2020年5月25日
主题:
引导和CSS别忘了分享这篇文章!
相关文章
扩大提供
注册HubSpot的CMS软件雷竞技苹果下载官方版
现在得到它