css中的选择器(2)

100 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第4天,点击查看活动详情

今天继续学习css中的选择器,之前说到了标签选择器和类选择器,今天继续了解其他的css选择器。

id选择器

id选择器与html中单个元素单项内容一一对应,具有唯一性

在html中增加一个元素属性: id,id属性的属性值设置有以下要求:

  1. 应该是英文名称,名称中可以出现数字
  2. 名称不能是标签名,也不能是属性

在css中选择器的书写格式为 #加上id属性值

例如下图: 对html中无序列表的三个li分别设置了id属性,在css中各个选择器的书写格式均为html中id属性值前加上了 #,最后实现了三个li分别有不同的字体颜色。 image.png

不合规定的id选择器书写方法

书写id名含有空格

将html中id属性值书写为带有空格的两个css中id选择器名称,这样的写法会定位不到 box1 box2选择器,因此li“111”显示的是默认样式的黑色字体。 image.png 如果将css中的选择器 #box1 修改成 #box1 box2 是不是就能定位到css样式了呢? image.png
如上图结果,把css选择器修改为 #box1 box2,li“111”依旧是默认的黑色字体。原因是:id选择器命名中不能有空格

image.png
搜索结果显示id名有空格是非法id定义。

id名称被用于多个html标签中

当id名称被用于多个标签中时,第一个使用该id名的html元素和后续使用该id名的元素都会被地选择器定位到并加上css样式,但是会影响后续的使用,因此不建议这样书写id名称,应该保证所有的id名称与元素一一对应。
如下图:
li“222”和li“2222”都被添加了 box2 id属性,展示的样式均为黄色字体,但是对后续的使用会有影响,所以这样的书写应该避免出现。 image.png

如果有两个以上的标签需要同样的样式应该考虑使用类选择器进行处理,将上方的id选择器修改为class选择器,书写格式如下: image.png