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

一、id选择器怎么用

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

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

<p id="author">
  <strong>劳拉·琼斯 (Laura Jones)</strong> 于 2027 年 6 月 21日星期一发布
</p>

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

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

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

<footer>
   <p id="copyright">版权所有 © 2023 tangjiusheng.cn</p>
</footer>

二、class类选择器

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

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

        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去学习网页开发</a>
          <p class="related-author">作者：乔纳斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龙</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">为什么 JavaScript 很棒</a>
          <p class="related-author">作者：玛蒂尔达</p>
        </li>

在CSS上，我们这样写

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

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

ul{
  list-style: none;
}

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

HTML代码如下：

<ul class="related">
        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去学习网页开发</a>
          <p class="related-author">作者：乔纳斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龙</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">为什么 JavaScript 很棒</a>
          <p class="related-author">作者：玛蒂尔达</p>
        </li>
      </ul>

CSS代码如下：

.related {
  list-style: none;
}

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

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

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

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