CSS中id选择器失效，代码看起来没问题

最新推荐文章于 2024-09-28 18:51:04 发布

苏一恒

最新推荐文章于 2024-09-28 18:51:04 发布

阅读量5.9k

点赞数 4

分类专栏：前端bug 文章标签： id选择器失效

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/83655904

版权

前端bug 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

最近在学习CSS3的时候，无意间发现这段代码竟然没有显示出对应的样式效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#1{color:red;background-color: orange;}
		</style>
	</head>
<body>
		<div id="1">1</div>
</body>
</html>

,就算是代码的颜色区别显示，也没有发现有什么问题，F12浏览器发现元素并未应用CSS样式，但是代码也并未发现任何格式问题。后来去搜索id选择器的资料，前端入门教程网站上并未提及相关注意事项，后来终于有了眉头：

基本上这些命名都符合标识符的命名规则
1、必须由字母、数字、下划线和美元符号组成
2、首字母必须是字母或下划线
3、建议采用驼峰式命名如：newWord，从第二个单词开始首字母大写

发现我把#1改成了#a就完全没问题了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#a{color:red;background-color: orange;}
		</style>
	</head>
<body>
		<div id="a">1</div>
</body>
</html>