css中id选择器怎么用（id选择器和class选择器的区别）

一、id选择器怎么用

• 我们之前给一个段落中添加斜体的标识的时候我们会在CSS里面这样做，这次我们将学习使用ID选择器来实现这项功能

• 我们在之前的代码中给标签添加id

  劳拉・琼斯 (Laura Jones) 于 2027 年 6 月 21日星期一发布

• CSS代码是这样的，相信你能明白这是什么意思，相当于给这个段落起名字一样

#author {
  font-style: italic;  
  font-size: 18px;
}

相同的道理，我们给版权信息也用这种方法去写；如下所示：

二、class类选择器

• 除了id选择器，还有类选择器。那么这两个选择器有什么区别呢？id选择器不允许id名字有相同的，而类选择器可以多种元素使用同一个这样的选择器。

• 举个例子，我们现在将下方的几个作者添加同样的类选择器

        

          如何去学习网页开发
          作者：乔纳斯・施梅德特曼

        
        

          
          CSS 的未知力量
          作者：吉姆.狄龙

        
        

          
          为什么 JavaScript 很棒
          作者：玛蒂尔达

        

在CSS上，我们这样写

.related-author {
  font-size: 18px;  
  font-weight: bold;
}

• 如上图所示，这些无序列表的黑点看上去实在难看，如何将它去除呢？如下

ul{
  list-style: none;
}

但是如果html中有多个无序列表，这个时候我们就需要使用类选择器去做这件事情了

HTML代码如下：

        

          如何去学习网页开发
          作者：乔纳斯・施梅德特曼

        
        

          
          CSS 的未知力量
          作者：吉姆.狄龙

        
        

          
          为什么 JavaScript 很棒
          作者：玛蒂尔达

        
      

CSS代码如下：

.related {
  list-style: none;
}

• 疑问：为啥上面的不用id选择器，而是用class呢？

• 因为当我们不止一个元素需要使用CSS样式的时候，我们通常都会选择类选择器

三、id选择器和class选择器的区别

在实际的生活中，我们都会使用类选择器，因为在id选择器只能使用一次，如果你后续使用同样的css样式会增加你的代码量，所以即使是一个CSS，也建议使用类选择器，而不是id选择器。